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 · See also

02·CSS

Border Radius Previewer

Fine-tune all four corners independently or use the 8-value elliptical syntax. See the shape update live.

02·CSS

Gradient Generator

Build linear, radial, and conic CSS gradients with multiple color stops, angle control, and real-time preview.

02·CSS

Box Shadow Generator

Layer multiple box shadows with full control over offset, blur, spread, color, and inset. Copy the CSS instantly.

Runs entirely in your browser.

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

CSS Clip-Path Maker

Presets

Editor

Preview

Points

Related Tools