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-pathand background color.
With the exception of a handful of older browsers, support is pretty good when using the
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.
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.