Check how much unused CSS you have on your website:
CSS Clip Path Generator
This tool will help you generate a CSS clip-path. It automatically generates a grid with useful snapping points so you can create interesting shapes. Drag from the middle of a line to add a new point.
clip-path and background color.FAQ
What is the browser compatibility like?
With the exception of a handful of older browsers, support is pretty good when using the polygon() function.
How does the grid work?
When you have Snap To Grid enabled, it will automatically generate some useful lines, circles and points for creating right angles, equal lengths, triangles and align the points into lots of different useful places.
Can I edit an existing clip-path?
Sure! Just paste your clip-path code into the output box and we'll do our best to parse it. You can also edit a generated clip-path to see how some tweaks would look.
What controls are there?
- Drag from the middle of a line to add a new point
- Hold shift while dragging to temporarily disable the grid
- Hold shift while clicking to select two corners
- Drag a box around multiple corners to select lots
- Click on an edge to select two corners
- Drag the whole shape
- Undo (Ctrl+Z or ⌘+Z)
- Redo (Ctrl+Y or ⌘+⇧+Z)
- New (Ctrl+N or ⌘+N)
- Save (Ctrl+S or ⌘+S)
- Copy The Snippet (Ctrl+C or ⌘+C)
- Share your creation using a permanent link