CSS Clip-Path Generator

Using the CSS Clip-Path Generator

What clip-path does

clip-path hides every part of an element outside a shape. The element keeps its full box for layout, but only the area inside the shape is painted and clickable. It works on images, videos, gradients and whole sections.

Polygon coordinates

A polygon is a list of points, each an x and y position from the top left, usually in percent so the shape scales with the element. The generator writes the points for you; the adjustment slider moves the points that define the shape's character, such as how sharp a chevron is.

Circles, ellipses and inset

circle() and ellipse() take a radius and a centre. inset() trims each edge and accepts round for rounded corners, handy for revealing an image from the edges in an animation.

Animating shapes

You can transition between two clip-paths as long as both are polygons with the same number of points. That is how many hover reveals and morphing shapes are built.

Accessibility and clipped content

Clipping only changes what is painted. Text inside a clipped element can be cut off visually while screen readers still read all of it, and clipped-away areas stop receiving clicks. Keep important text well inside the visible shape, and test the result at several widths, since percentage points move with the element.

Frequently asked questions