CSS Clip-path Generator

Four shape functions

Build circle(), ellipse(), inset(), and polygon() clip paths. Circle, ellipse, and inset use sliders for radius, radii, offsets, and the round corner radius. Inset shorthand is expanded to four explicit percentages for clarity.

Drag polygon points

Grab any vertex in the preview and drag it — coordinates snap to a 0–100% grid and mirror into the numeric fields. Add or remove points freely (3 to 24); the gradient preview shows the exact clipped result.

Presets and import

Start from triangle, diamond, hexagon, star, arrow, speech bubble, avatar circle, or ticket presets, then fine-tune. Paste any existing clip-path value (with or without the property name) into the import box to keep editing it here.

Export

Copy or download a ready-to-use clip-path: ...; declaration. Your shape is saved in this browser. All processing happens locally.