◆ CSS Clip-Path Generator

By Λ · Updated June 9, 2026 · ~3 min read

How this generator works

The left column lists 25 shape presets, from basic Square, Circle, Ellipse, and Triangle through Pentagon, Heptagon, Octagon, Star (5), Cross, Rabbet, Speech Bubble, both arrow directions, a scalloped Wave, a Frame, and a Rounded inset. The page loads with Hexagon selected. Picking a preset clips the orange gradient square to that shape and prints the exact rule below it as a single clip-path: ...; line. Click the line once and it lands on your clipboard. The generator is a small script bundled into this page itself, so the shapes you experiment with stay on your machine instead of being posted to a server somewhere.

Worked examples

Trapezoid card header. Select Trapezoid and the output reads clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);. Drop that on a banner div and the top edge narrows to the middle 60% while the bottom stays full width. Editing the first two x values changes the taper.

Picture frame reveal. Select Frame and you get clip-path: inset(10% 10% 10% 10%);, which hides a 10% border on every side. Animate it to inset(0) on hover and the image appears to expand out of a matte.

What clip-path does

The CSS clip-path property cuts an element to a specified shape. Anything outside the shape is invisible but still counts for layout. It is the modern replacement for image masks, SVG clipPath references, and CSS shape hacks. Browser support has been universal since 2020.

The four shape functions

• polygon(x1 y1, x2 y2, ...): straight-edged shape with any number of vertices. Most flexible.
• circle(radius at cx cy): circle with center and radius.
• ellipse(rx ry at cx cy): ellipse with two radii.
• inset(top right bottom left round radius): rectangle with optional rounded corners.

Coordinates are percentages by default (0% to 100% of the element). Pixels also work.

Common patterns

Hero image with diagonal cut: polygon(0 0, 100% 0, 100% 80%, 0 100%). The trick is the asymmetric bottom corners.

Hexagon: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%). The classic six-sided shape.

Speech bubble: a polygon with a triangular notch at one side. Tedious but possible.

Animated clip-path: the transition between two polygons must have the same number of vertices. Otherwise the browser interpolates the first matching count and you get jumpy animations.

Limitations and edge cases

The preview here is a perfect square, and most presets assume that ratio. Apply Star (5) or Cross to a wide rectangle and the percentages stretch with it, so a star on a 16:9 hero looks squashed unless you recalculate the points. Two production surprises: pointer events follow the visible shape, so a click on a clipped-away corner passes through to whatever sits behind, and box-shadow gets cut off along with everything else outside the path. The element also keeps its full rectangular footprint in layout; neighbors never wrap into the cut-away regions (that job belongs to shape-outside).

FAQ

Can I edit the polygon points after copying?

Yes, the output is plain CSS text. Each x y pair in a polygon is one vertex, so nudging a number by a few percent moves that corner. Chrome and Firefox DevTools both ship a clip-path point editor if you want to drag vertices visually afterward.

Why do Diamond and Rhombus produce identical CSS?

Both presets emit the same four-point polygon. On the square preview they render the same; on a non-square element the proportions diverge, which is why both names exist as starting points.

Can a clip-path shape be animated?

Transitions work between two values of the same function with matching structure: polygon to polygon with equal vertex counts, or inset to inset. Mixing functions, or polygons with different point counts, snaps instead of tweening.

Related

For other CSS visual tools, see gradient generator, box-shadow editor, and cubic-bezier editor. For modern color, see the CSS color in 2026 post.