Clip path generator
Cut a real photo into a hexagon, circle, chevron or inset, tune the amount, then copy the clip-path as CSS or as a Tailwind arbitrary value.
clip.csscss
.shape {
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
usage.tsxtsx
<div class="[clip-path:polygon(25%_0%,_75%_0%,_100%_50%,_75%_100%,_25%_100%,_0%_50%)]" />
Questions
Are the percentages relative to what?+
The element's own box, always. That is what makes a clip responsive: the same polygon holds its shape whatever size the element ends up.
Does clipping affect the layout?+
No. The element still takes its full box, and the clip only decides what is painted. Text beside it flows as though nothing was cut, which is why a clipped decoration needs its own spacing.
Can I animate one?+
Yes, between shapes with the same number of points. A polygon with four points animates to another four-point polygon; going from a circle to a polygon does not interpolate.
Related tools
Border radius generatorSet each corner on its own, read the shorthand as it collapses, and copy it as CSS, a Tailwind arbitrary value or a theme token.CSS filter playgroundStack blur, brightness, contrast, saturation and the rest over a real photograph, and copy the result as filter, as backdrop-filter or as a Tailwind class.Box shadow generatorBuild a layered box-shadow the way real interfaces use it, a tight edge under a wide soft lift, then copy it as CSS, a Tailwind class or a theme token.