CSS Clip-Path Polygon Shape Generator
Switch between polygon, circle, ellipse, and inset shapes — every CSS clip-path function, not just polygons. Drag points to reshape, add or remove polygon points freely, and preview against your own image.
Drag any solid dot to reshape. Click a dot to select it (for removal). Click a small "+" dot on an edge to add a point exactly there.
How CSS clip-path polygons are defined
clip-path isn't only polygon() — circle(), ellipse(), and inset() are separate shape functions with their own syntax, each better suited to different shapes than forcing everything into a polygon. Polygons take a list of x% y% coordinate pairs and hide everything outside the shape they trace; circles and ellipses take a radius and a center position; inset trims each edge by a percentage, optionally with rounded corners.
A custom image mask CSS workflow
Upload your own image to preview the clip against real content instead of a placeholder gradient, then apply the generated clip-path to an <img>, a background-image div, or any element you want cropped — it works the same way regardless of what's inside.