How do I use the CSS Clip Path Generator?

Switch between circle, ellipse, polygon, and inset presets to choose a starting shape. Use the sliders for circle, ellipse, or inset values, or drag the polygon points on the preview image directly. Watch the sample image update live as the clip-path changes in real time. Copy the generated clip-path and webkit-clip-path CSS when the shape looks right.

Is the CSS Clip Path Generator free?

Yes, the CSS Clip Path Generator is completely free. It runs entirely in your browser with no signup, no download, and no data sent to any server.

✂️

css

CSS Clip Path Generator

Create clip-path CSS with shape presets, draggable polygon points, and a live image preview.

css clip path generatorclip-path generatorpolygon clip pathcss maskingdesign css tool

Drag the blue points directly on the preview to reshape the polygon clip path.

Live CSS output

Interactive preview

Polygon

Presets switch between circle, ellipse, polygon, and inset values. Polygon mode keeps the handles visible so you can drag points and watch the CSS update live.

How to use

Build clip-path CSS with presets and draggable polygon points

1 Switch between circle, ellipse, polygon, and inset presets to choose a starting shape.
2 Use the sliders for circle, ellipse, or inset values, or drag the polygon points on the preview image directly.
3 Watch the sample image update live as the clip-path changes in real time.
4 Copy the generated clip-path and webkit-clip-path CSS when the shape looks right.

A clip-path generator is useful when you want custom-shaped images, cards, hero art, or decorative masks without opening a design app. This version keeps the workflow visual by applying each shape directly to a sample image so you can judge the result immediately instead of editing percentages blind.

Polygon dragging is especially helpful for custom shapes because it gives you direct control over each point while the CSS output updates alongside the preview. The circle, ellipse, and inset presets cover common cases, and the copied output is ready to drop into modern CSS with both standard and WebKit-prefixed properties.

More Css tools