Clip-Path Generator
Start from a preset, drag the points into place, and copy the clip-path. Coordinates are percentages, so the shape scales with the element.
Drag the white points, or type exact values below.
[clip-path:polygon(25%_5%,75%_5%,100%_50%,75%_95%,25%_95%,0%_50%)]
clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
Frequently asked questions
How do I use clip-path in Tailwind CSS?
Tailwind has no built-in clip-path utilities, so use an arbitrary property: [clip-path:polygon(50%_0%,100%_100%,0%_100%)]. Underscores stand for spaces. It works with variants such as hover: and md:.
What do the percentages in polygon() mean?
Each pair is an x and y position inside the element, where 0% 0% is the top left and 100% 100% is the bottom right. The shape is drawn by joining the points in order.
Why do clipped elements lose their shadow or border?
clip-path cuts everything outside the shape, including box-shadow and borders. To keep a shadow, put it on a parent element with the filter drop-shadow utility instead of box-shadow.
Can I animate between two clip-paths?
Yes, if both polygons have the same number of points. Transition clip-path on hover and the shape morphs smoothly, which is handy for image reveals.
Guides that go with this tool
More free Tailwind CSS tools
More free tools & components
Keep going with another tool, or grab a ready-made component.