Developer Tools toolsUpdated July 2026

Free CSS Clip-Path Generator

Pick a custom shape and get its ready-to-use CSS clip-path value, directly in your browser.

Free online tool No signup Live preview Browser-first privacy
AdvertisementTop tool sponsor space

Generated entirely in your browser.

AdvertisementBelow tool sponsor space

How to use the clip-path generator

  1. Select a shape.
  2. See the live preview update.
  3. Copy the generated clip-path CSS.

How this works

Everything runs entirely in your browser — each shape is a pre-defined clip-path polygon() or circle()/ellipse() value applied directly to the live preview.

Common use cases

  • Get the clip-path CSS for a custom-shaped image or div
  • Create a hexagon, star, or arrow shape for a design
  • Experiment with shape options before using one in a project

Frequently asked questions

Is this clip-path generator free?

Yes. It is completely free, with no signup and no limits.

Does clip-path work in every browser?

It's supported in all current major browsers.

Can I customize the shape points myself?

This tool offers a curated set of ready-made shapes. For pixel-perfect custom polygons, copy a shape's CSS as a starting point and adjust the percentages by hand.