CSS clip-path Generator

What is CSS clip-path Generator?

CSS clip-path Generator is a free visual editor for the CSS clip-path property, made for front-end developers and designers who want to crop elements into non-rectangular shapes. Choose a preset from the dropdown — circle() and ellipse() with a radius and center point, polygon() with as many vertex points as you need, inset() with four edge offsets, or a rounded inset() variant with a corner radius. Each parameter is a percentage entered through a number input, and a checkerboard-backed preview box reveals the resulting shape in real time. The complete clip-path CSS is generated for you to copy. Use it to mask images, cut diagonal section dividers, build hexagon avatars, or carve speech-bubble shapes without hand-counting coordinates.

How to use CSS clip-path Generator

1. Choose a shape from the preset dropdown: circle, ellipse, polygon, inset, or round.
2. For circle or ellipse, set the radius (or X/Y radii) and the center X/Y position in percent.
3. For polygon, edit each vertex's X and Y percent; click Add point to add more vertices and reorder by editing values.
4. For inset or round, set the top, right, bottom and left offsets; round also takes a corner radius.
5. Watch the live preview crop the box as you type.
6. Copy the generated clip-path CSS and paste it into your stylesheet.

Examples

Preset circle, radius 50%, center 50% 50%

clip-path: circle(50% at 50% 50%);

Preset polygon, points (50,0) (100,100) (0,100)

clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

Preset round, inset 10% all sides, corner radius 20%

clip-path: inset(10% 10% 10% 10% round 20%);

Frequently asked questions

What is clip-path used for?

The CSS clip-path property crops an element to a basic shape, so only the area inside the shape stays visible. It is great for circular avatars, diagonal section cuts, hexagon grids, image masks and speech bubbles — all without extra images or SVG files.

How does the polygon preset work?

polygon() draws a shape by connecting a list of X/Y vertex points in order. Edit each point's percent values, and use Add point to insert more vertices; the last point connects back to the first automatically. A minimum of three points is kept so the shape stays valid.

Why are the values in percent?

Percentages make the clip scale with the element, so the same clip-path works at any size. 0% is the left or top edge and 100% is the right or bottom edge of the element's box.

What does the round preset add?

The round preset uses inset() with a round corner radius, producing a rectangle cropped inward on each side and given rounded corners — handy for soft framed crops that plain border-radius can't combine with an inset clip.

Is my data sent anywhere?

No. The generator runs entirely in your browser with JavaScript — your shape values never leave your device, so it works privately and even offline after the page loads.