Clip-Path Generator
Create clip-path shapes from presets, a custom value, or the visual polygon editor.
Free & unlimited
Mode
Size
Background
Shape presets
Generated CSS
clip-path: circle(50% at 50% 50%);
All processing happens in your browser. No data is sent to any server.
About this tool
- 1
Choose a shape type
Select from polygon, circle, ellipse, or inset to start with a base shape.
- 2
Edit the points
Drag polygon vertices on the visual canvas or adjust circle/ellipse parameters with sliders.
- 3
Fine-tune coordinates
Click any point to enter exact percentage or pixel values for precise positioning.
- 4
Copy the clip-path CSS
Export the complete clip-path property ready for your stylesheet.
- Use percentage values for responsive clip-paths that scale with the element.
- Start with a preset shape and modify it rather than building from scratch.
- Clip-path animations work with polygon shapes that have the same number of points in both states.
- Combine clip-path with transitions for creative reveal and morph effects.
- Visual drag-and-drop polygon editor
- Circle, ellipse, and inset shape builders
- Preset shape library (arrows, stars, hexagons, etc.)
- Precise coordinate input for each vertex
- Animation-ready polygon output with matched point counts
- Create non-rectangular image masks for hero sections.
- Build diagonal section dividers between page sections.
- Design custom avatar shapes beyond simple circles.
- Animate shape morphing transitions on scroll or hover.
Yes. The clipped-away regions are not visible and do not receive pointer events. Users cannot click or hover on hidden parts of the element.
Yes, but only between polygon shapes with the same number of vertices. The browser interpolates each point position during the transition.
clip-path with basic shapes is supported in all modern browsers. The -webkit- prefix is no longer needed in current versions of Chrome, Safari, Firefox, and Edge.