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.