CSS clip-path generator
Pick a shape, then drag its points to change it. The CSS updates as you go — copy it as a
clip-path declaration or as a Tailwind CSS class.
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
[clip-path:polygon(50%_0%,100%_100%,0%_100%)]
Drag a point, or select it and use the arrow keys (Shift = 10%). Add point splits the edge after the selected point.
How clip-path works
clip-path hides every part of an element outside a shape. The element keeps its size and its place in the
layout — only what you see (and what you can click) changes. Points are percentages of the element's own box, so the
same clip-path fits an element of any size.
- polygon() — a list of x y points, joined in order. The first point is
50% 0%for the triangle: halfway across, at the top. - circle() — a radius and a centre. A percentage radius is measured against the box's diagonal divided by
√2, so
circle(50%)is a true circle that just touches all four sides of a square. - ellipse() — two radii: the first is a percentage of the width, the second of the height.
- inset() — cuts in from the top, right, bottom and left, with optional rounded corners
(
round 16px).
The regular shapes — pentagon, hexagon, heptagon, octagon and star — are calculated, not hand-typed, then stretched to fill the box. On a square element they touch all four sides; on a wide element they stretch with it.
How we test it
Every shape this page can make is rendered by Chrome and checked point by point: across 71 shapes (117,172 sample points, phone and desktop sizes) the area Chrome keeps matches the shape's geometry exactly, and every Tailwind class compiles with Tailwind CSS 4.3.3 to the same clip-path.
Questions
Do I still need -webkit-clip-path?
No. Every current browser supports clip-path with these basic shapes without a prefix, including Safari
since version 13.1. You only need the prefix for very old iOS devices.
Why doesn't Tailwind have a clip-path class?
Tailwind CSS has no built-in clip-path utilities, so the class here is an arbitrary property in square brackets. Spaces become underscores, which Tailwind turns back into spaces. It works in Tailwind v3 and v4.
Can I animate a clip-path?
Yes — transition: clip-path 0.3s animates between two shapes of the same type. Two polygons need the same
number of points, so add points to the simpler shape until they match.
Does the clipped area still take clicks?
No. Clicks and taps on the hidden part pass through to whatever is behind it, and the element still takes up its full box in the layout. Our test relies on this: it checks which points Chrome reports as part of the element.
Building colours for the shape? Try the Tailwind shade generator, or turn your CSS into classes with the CSS to Tailwind converter.