CSS Clip-Path Editor
Visual clip-path editor: presets + custom polygon. Drag points, copy the CSS.
Live Preview
CSS Output
clip-path: circle(50% at 50% 50%);About CSS Clip-Path Editor
Pick a preset shape such as a triangle, hexagon, or arrow, or switch to custom mode and drag individual points to build your own polygon. The preview clips a sample element live as you edit, and the matching clip-path CSS is generated for you to copy into a stylesheet.
Everything runs in your browser, so the shapes you build and any image you preview against stay on your device and are never uploaded. Clip-path is handy for cutting decorative angles into section dividers, masking avatars, or creating non-rectangular cards without exporting graphics from a design tool.
Frequently asked questions
- What does clip-path do?
- It hides the part of an element that falls outside a defined shape, so only the region inside the path remains visible.
- Are clipped elements still clickable outside the shape?
- No. Clip-path also clips pointer events, so clicks land only on the visible region of the element.
- Can I animate a clip-path?
- Yes, as long as both the start and end shapes use the same shape function and the same number of points.