Do clipped elements still capture clicks outside the shape?

No. clip-path also clips the hit-test region, so pointer events only fire inside the visible polygon. Keep this in mind for interactive elements — a clipped button has a smaller click area.

Can I animate clip-path?

Yes, but only between shapes with the same number of points. Interpolate a polygon() to another polygon() with identical vertex count and the browser will tween each point.

Why do percentages make my shape scale correctly?

Percentages are relative to the clipped element, so the same polygon works at any size. Using pixels locks the shape to one resolution and breaks responsive layouts.

CSS Clip-Path Maker

Draw custom clip-path polygons with an interactive editor. Click to add points, drag to reposition, double-click to remove.

Presets

Editor

6 points · Click to add · Double-click to remove

Preview

Clipped Content

Points

1,%

2,%

3,%

4,%

5,%

6,%

CSS

clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);

3 Tools · See Also

02·CSS
Border Radius Previewer
accent · #7C3AED
Fine-tune all four corners independently or use the 8-value elliptical syntax. See the shape update live.
02·CSS
Gradient Generator
accent · #E91E63
Build linear, radial, and conic CSS gradients with multiple color stops, angle control, and real-time preview.
02·CSS
Box Shadow Generator
accent · #555A6B
Layer multiple box shadows with full control over offset, blur, spread, color, and inset. Copy the CSS instantly.

✱ Privacy◇

Runs in your browser.

Every color, gradient and CSS output is generated on this page. Nothing is uploaded, logged or shared.

Local-only

CSS Clip-Path Maker

Presets

Editor

Preview

Points

Related Tools