CSS Clip-Path Generator

About CSS Clip-Path Generator

The CSS Clip-Path Generator is a visual tool for creating CSS clip-path shapes without writing the polygon coordinates by hand. Pick from 15 presets - triangle, hexagon, star, arrow, message bubble, circle, ellipse, rounded inset and more - fine-tune them with a size slider, watch a live clipped preview, and copy ready-to-paste CSS that already includes the -webkit-clip-path prefix. Use it whenever you want to crop an element into a non-rectangular shape. It runs entirely in your browser, so nothing is uploaded and no design ever leaves your device.

How to use CSS Clip-Path Generator

1. Open the CSS Clip-Path Generator and pick a shape from the preset chips (hexagon, star, triangle, arrow, circle, inset, and more).
2. Drag the Size / amount slider to reshape sizable presets - for example, point depth on a star, head width on an arrow, or radius on a circle.
3. Switch the preview backdrop between Gradient, Photo, or Solid to see how the clip looks over real content.
4. Toggle Show clip outline to see the exact cut edge while you tune the shape.
5. Click Copy Value to grab just the clip-path value, or Copy Rule to get a full .shape CSS block with the -webkit- fallback line included.
6. Paste the CSS onto any element that has a background, image, or video to crop it into the shape.

Frequently asked questions

Does the CSS Clip-Path Generator include the -webkit- prefix?

Yes. The output always shows both the -webkit-clip-path line and the standard clip-path line. The -webkit- prefix is there for older Safari and iOS versions, so copying the Rule gives you a cross-browser-safe block.

What shapes can I create?

There are 15 presets: triangle, trapezoid, parallelogram, rhombus, pentagon, hexagon, heptagon, octagon, star, chevron, arrow, message bubble, circle, ellipse, and rounded inset. Several of them are reshapeable with the size slider - for instance, you can make a star spikier or widen an arrow head.

Why doesn't the size slider change some shapes?

Presets with fixed geometry - like the triangle, rhombus, pentagon, hexagon, heptagon, and octagon - ignore the slider on purpose so their proportions stay correct. The tool tells you when a preset is fixed versus sizable, and the slider is disabled for fixed shapes.

Can I clip an image or video with the output?

Yes. A clip-path can be applied to any element that has a background, image, or video. Paste the copied CSS onto that element and it will be cropped to the shape - the preview even has a Photo and Gradient backdrop so you can see how it reads over visual content.

Is my work private? Does anything get uploaded?

Everything runs 100% in your browser. The shapes are generated with pure CSS - no images, no libraries, and no network calls - so nothing you do is ever uploaded or stored on a server. Your preset and settings are only remembered locally in your browser.