Clip-path generator

What this clip-path generator does

Choose one of ten preset shapes, see it applied to a live gradient tile and copy the clip-path declaration. The presets cover the shapes people most often reach for — triangle, trapezoid, rhombus, pentagon, hexagon, star, chevron, message bubble, circle and a rounded inset — written as plain polygon(), circle() and inset() values with percentage coordinates, so they scale to any element size and need no SVG.

How to use it

1. Click a shape name under Shape. The active button is highlighted and the preview morphs to the new outline.
2. Read the generated declaration, for example clip-path: polygon(50% 0%, 0% 100%, 100% 100%);.
3. Click Copy and paste it onto any element — a div, img, video or section.
4. Tweak coordinates by hand if you need a variation; the reference below explains the coordinate system.

Preset reference

Shape	Value	Points
Triangle	polygon(50% 0%, 0% 100%, 100% 100%)	3
Trapezoid	polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%)	4
Rhombus	polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)	4
Pentagon	polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)	5
Hexagon	polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)	6
Star	10-point polygon	10
Chevron	polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%)	6
Message	polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%)	7
Circle	circle(50% at 50% 50%)	—
Inset (rounded)	inset(10% 10% 10% 10% round 12px)	—

Coordinates are x y pairs measured from the element’s top-left corner: 0% 0% is top-left, 100% 100% is bottom-right. Points are joined in order and the last point connects back to the first, so listing them clockwise keeps the shape easy to read. Shapes with the same point count (hexagon and chevron, both 6) can be transitioned into one another.

Editing and extending the presets

• Slanted section divider: polygon(0 0, 100% 0, 100% 85%, 0 100%) on a full-width section, or with a fixed slant height: polygon(0 0, 100% 0, 100% calc(100% - 60px), 0 100%).
• Hexagon avatar: apply the hexagon preset to a square img with object-fit: cover. For a pointy-top hexagon rotate the coordinates: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%).
• Reveal animation: start with inset(0 100% 0 0) and transition to inset(0 0 0 0) to wipe an image in from the left. inset() to inset() interpolates cleanly.
• Hover morph: hexagon at rest, chevron on hover, transition: clip-path 0.3s ease — same point count, so it tweens.
• Rounded polygons: polygon() has no round keyword yet; for a rounded hexagon use an SVG clipPath with clip-path: url(#id) or layer an inset(... round ...).

Gotchas

• Shadows and borders are clipped. Put clip-path on an inner element and filter: drop-shadow(0 8px 16px rgba(0,0,0,0.3)) on its parent.
• Clicks follow the shape. Clipped-away areas do not receive pointer events, which is usually desirable but surprising for hover effects near the edges.
• Text inside gets cut. Add padding so content stays within the visible region, especially for triangles and chevrons.
• -webkit-clip-path is still required for Safari 9–13.0. Most projects no longer need it.
• Performance. A static clip is cheap; animating a complex polygon forces repaint on every frame. Keep animated polygons under about 20 points and avoid clipping large, frequently updated areas.

Related tools and snippets

• Border-radius generator — soft blob shapes that keep box-shadow and borders working.
• Box-shadow generator — build the shadow you will apply via drop-shadow() on the wrapper.
• Corner ribbon snippet — a rotated ribbon badge, the classic companion to a clipped card corner.
• Gradient generator — a background gradient to fill the clipped shape.
• SVG optimizer — when a shape needs curves and must fall back to an SVG clipPath.