CSS Clip-Path Generator
Interactively build CSS polygon shapes by dragging control handles. Choose from 18+ responsive presets, tweak coordinate percentages, and copy ready-to-use CSS.
Drag dots to edit • Click on empty canvas space to add vertex
Background:
How CSS clip-path Works
The CSS clip-path property specifies a clipping region where everything inside the region is visible and everything outside is hidden. Unlike older rectangular overflow masks, clip-path: polygon(...) allows you to define arbitrary geometric shapes using percentage coordinates pairs (X% Y%).
Clip paths are hardware accelerated on modern GPUs and support CSS transitions, enabling silky-smooth polygon morphing animations between shapes that share identical vertex counts.
Frequently Asked Questions
Which browsers support CSS clip-path?
CSS
clip-path is supported in all modern evergreen browsers including Chrome, Edge, Safari, Firefox, and Opera. For older iOS and WebKit engines, including the -webkit-clip-path vendor prefix ensures full backward compatibility.
Can I animate between two clip-path shapes?
Yes! You can animate between two polygon shapes using CSS transitions or keyframes, as long as both polygons contain the exact same number of vertices. If the vertex counts differ, the transition will jump rather than smoothly morph.
How do I delete or add control points?
To add a vertex, simply click anywhere inside the canvas preview or click "+ Add Point" in the sidebar. To remove a point, click the trash icon next to any coordinate pair in the vertices list. A polygon requires at least 3 points.