Shape Presets
Custom Polygon Editor
Click to add points. Drag to move. Right-click to remove.
Live Preview
CSS Output
Visual Editor
Drag points on the canvas to design custom clip paths visually. See changes in real time.
Shape Presets
Start from circle, ellipse, triangle, star, hexagon, and more. Tweak parameters to fit your design.
One-Click Copy
Generated CSS is ready to paste. Click Copy and drop it into your stylesheet or component.
Precision Controls
Fine-tune radius, position, and individual polygon points with exact percentage values.
Frequently Asked Questions
What is CSS clip-path?
clip-path is a CSS property that defines a clipping region — only content inside the region is visible. You can use basic shapes (circle, ellipse, polygon) or SVG paths to create masks on any HTML element.
Which browsers support clip-path?
clip-path with basic shapes (circle, ellipse, polygon) is supported in all modern browsers: Chrome 55+, Firefox 54+, Safari 13+, and Edge 79+. The polygon() function has the broadest support.
Can I animate clip-path?
Yes! You can animate clip-path with CSS transitions or keyframe animations as long as the shape function stays the same (e.g., polygon to polygon with the same number of points). Transitions interpolate each value smoothly.
Get Clip-Path Tips in Your Inbox
Subscribe for CSS tricks, new shape presets, and updates.