Remove Unused CSS

Want to know how much unused CSS is on your website? Find out here:

Quick & free. No signup needed.

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.


Use even-odd if you want to make holes in the middle
Hold shift to temporarily disable
Clip Path
This link won't include any image, only the clip-path and background color.


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