Clip Path Generator
Create CSS clip-path shapes without writing code by hand. Draw a custom polygon on the visual grid, or tune circles, ellipses and insets with sliders - then copy the ready-to-paste CSS for your website.
Click anywhere on the grid to add a point. Drag points to move them. Double-click a point to delete it.
Your CSS code
How to use
- Pick a shape type: Polygon for custom shapes, or Circle, Ellipse, Inset for quick ones.
- For polygons: click the grid to add points and drag them into place. Try a preset to start fast.
- For circle, ellipse and inset: move the sliders and watch the preview update live.
- Press Copy CSS and paste the code into your stylesheet on the element you want to clip.
Tips
- Polygons with more points make smoother curves - click to add points along the edge.
- Try a preset shape first, then drag points to customize it.
- Clip-path works on any element - images, divs and even text blocks.
- Test your shape at small screen sizes; complex polygons can look cramped on mobile.
Note: The polygon points are stored as percentages of the element width and height, so the shape scales with any element size. The -webkit- prefix is included by default for older Safari versions; modern Chrome, Edge and Firefox work without it.
Frequently Asked Questions (FAQ)
Which shape types are supported?
Polygon for custom shapes, plus Circle, Ellipse and Inset for quick ones.
How do I make a custom polygon?
Click the grid to add points and drag them into place, or start from a preset.
What CSS do I get?
Ready-to-paste CSS clip-path code, with the -webkit- prefix included for older Safari versions.
Is the clip path generator free?
Yes — free, no signup, and it runs in your browser.