CSS Clip Path Generator

The CSS Clip Path Generator creates custom shapes beyond what border-radius can achieve. Use clip-path to turn rectangles into hexagons, triangles, diagonal sections, speech bubbles, stars, or any polygon you can imagine. Supports all modern clip-path syntaxes: polygon() for custom points, circle() and ellipse() for curved shapes, inset() for rectangular crops, and raw SVG path references for arbitrarily complex shapes. Drag-and-drop polygon points with live preview; apply to images, divs, or text to create shaped UI elements that flat design cannot match.

Clip-path is one of CSS's most under-used features. While border-radius handles simple rounded corners, clip-path lets you create hexagonal avatars, diagonal hero sections, angled content dividers, speech bubbles, and star-shaped badges — all without SVG files or JavaScript. Common use cases include portfolio grids with unusual shapes, testimonial cards with tail pointers, section dividers at angles, and photo galleries with creative crops. Every shape generated by this tool is a valid clip-path CSS property value ready to paste into your stylesheet.

CSS clip-path syntax:

``css
clip-path: <shape-function> | url(#svg-id) | none;
``

Shape functions:

inset() — rectangular inset:
``css
clip-path: inset(10px); /* 10px from all edges */
clip-path: inset(10px 20px); /* 10px top/bottom, 20px left/right */
clip-path: inset(10px 20px 30px 40px); /* top, right, bottom, left */
clip-path: inset(10px round 20px); /* with border-radius */
``

circle() — circular clip:
``css
clip-path: circle(50%); /* centered, 50% radius */
clip-path: circle(50% at 50% 50%); /* explicit position */
clip-path: circle(100px at 200px 300px); /* pixel values */
``

ellipse() — elliptical clip:
``css
clip-path: ellipse(50% 30%); /* x-radius 50%, y-radius 30% */
clip-path: ellipse(50% 30% at 50% 50%); /* with position */
``

polygon() — custom shape with points:
``css
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); /* diamond */
clip-path: polygon(0 0, 100% 0, 50% 100%); /* triangle */
clip-path: polygon( /* hexagon */
50% 0,
100% 25%,
100% 75%,
50% 100%,
0 75%,
0 25%
);
``

Each point is x y in order. Percentages relative to element box.

path() — SVG path reference:
``css
clip-path: path("M 50 0 L 100 100 L 0 100 Z");
``

Uses SVG path data syntax. Powerful but harder to edit. Used for complex shapes.

url() — reference to SVG clipPath element:
``css
clip-path: url(#my-clip);
``

With inline SVG:
``html
<svg width="0" height="0">
<clipPath id="my-clip">
<polygon points="50,0 100,50 50,100 0,50" />
</clipPath>
</svg>
``

Common shapes:

- Triangle: polygon(50% 0, 100% 100%, 0 100%)
- Diamond: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)
- Pentagon: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%)
- Hexagon: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%)
- Star (5-point): polygon(50% 0, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0 38%, 37% 38%)
- Parallelogram: polygon(25% 0, 100% 0, 75% 100%, 0 100%)
- Chevron: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%)
- Message bubble: polygon(0 0, 100% 0, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0 75%)

Browser support:

Widely supported in modern browsers. clip-path with polygon(), circle(), ellipse(), inset() works in Chrome, Firefox, Safari, Edge since 2016-2017. SVG path syntax requires more recent versions.

Animation:

clip-path can be animated! The number of points must match between keyframes:

``css
@keyframes morph {
0% { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
100% { clip-path: polygon(50% 100%, 100% 0, 0 0); }
}
``

Animating clip-path with SVG paths requires the SVG Morph API (more complex).

Performance:

- inset(), circle(), ellipse(): very fast, GPU-accelerated.
- polygon() with few points: fast.
- polygon() with many points (100+): can slow rendering.
- path() and SVG url(): slower than CSS shape functions.

Differences from other techniques:

- clip-path vs border-radius: border-radius only rounds corners. clip-path creates arbitrary shapes.
- clip-path vs overflow: hidden: overflow: hidden crops to element box. clip-path can crop to any shape.
- clip-path vs mask-image: mask-image uses an image for masking (can have gradients, fades). clip-path creates hard-edge shapes.
- clip-path vs SVG clipPath: CSS clip-path is the modern CSS way. SVG clipPath is older, more powerful in SVG context.

clip-path vs border-radius: border-radius is limited to rounded corners. clip-path creates any polygonal shape. Use border-radius for simple cases, clip-path for custom shapes.

clip-path vs overflow: hidden: overflow: hidden crops child content to the parent rectangle. clip-path can crop to any shape — triangle, star, polygon. clip-path applies to the element itself.

clip-path vs mask-image: mask-image uses an image (usually SVG or gradient) for masking — supports soft edges, gradients. clip-path creates hard-edged geometric shapes. For smooth transitions, use mask-image; for precise shapes, clip-path.

clip-path vs SVG clipPath: CSS clip-path is modern, easier, declarative. SVG clipPath is older, can contain complex shapes. CSS is preferred for new work; SVG for advanced SVG-within-SVG scenarios.

Polygon vs path(): polygon() is easier to edit (point coordinates). path() uses SVG path syntax (Move, Line, Curve commands) — more powerful for curves and complex shapes. For geometric shapes, polygon; for organic shapes, path.

clip-path animation vs shape morphing libraries: CSS clip-path animations require same number of points between keyframes. For complex morphing (different topology), use libraries like Flubber.js or SVG morph packages.