CSS Clip-Path Generator

clip-path defines a clipping region that determines which parts of an element are visible. Everything outside the path is hidden. Use it for custom shapes like triangles, hexagons, diagonal sections, or creative image crops without needing SVG or canvas.

CSS supports several basic shapes: circle(), ellipse(), inset() for rectangles with optional rounding, and polygon() for arbitrary shapes with any number of points. You can also reference an SVG <clipPath> via url() for complex curves and paths.

clip-path only affects visibility — the element still occupies its full box in the layout. This means padding, margins, and surrounding elements are unaffected. Tip: if you need the element to actually shrink, combine clip-path with matching width/height adjustments.

Yes, clip-path is animatable between shapes of the same type with the same number of points. For example, you can transition between two polygon() values smoothly. Tip: ensure both keyframes use the same number of polygon points for a clean morph effect.

Tailwind doesn't include built-in clip-path utilities, but you can use arbitrary values: clip-path: [polygon(50%_0%,100%_100%,0%_100%)]. Alternatively, define a custom utility in your tailwind.config or use inline style. This generator gives you the exact value to paste.