CSS Clip Path Generator Online – Polygon & Shape Maker

How to use the CSS Clip Path Generator

Choose a shape from the Shape grid: 19 polygon presets (triangle to star, arrows, chevrons, frame) or Circle, Ellipse and Inset.

For polygons, drag the handles on the preview, or select a point and nudge it with the arrow keys (Shift moves 5%). Use + Add point and Remove point to change the number of corners.

For circle, ellipse and inset, set the radius, center or edge values with the sliders; inset also has a Corner radius.

Switch the preview Background (Gradient, Photo, Solid) and toggle Show clipped-away area to see what gets cut.

Press Copy or Download above the CSS to take the rule.

A CSS clip path generator with draggable points

The clip-path property hides every part of an element outside a shape you define. This CSS clip path generator lets you build that shape visually: start from a preset, drag the corner handles on the preview, and copy a rule with coordinates already calculated. It covers the four basic shape functions: polygon(), circle(), ellipse() and inset().

Example output

The default hexagon produces:

.clipped {
  -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

Each pair is an x and y position as a percentage of the element's box, listed clockwise from the top left. Because the values are percentages, the shape scales with the element. The prefixed line is only there for older Safari versions; current browsers use the unprefixed property.

The basic shapes are shorter:

clip-path: circle(40% at 50% 50%);
clip-path: ellipse(45% 30% at 50% 50%);
clip-path: inset(10% 10% 10% 10% round 12px);

Shapes and options

Polygon presets

The presets cover triangle, trapezoid, parallelogram, rhombus, pentagon, hexagon, heptagon, octagon, 5- and 6-point stars, cross, left and right arrows, left and right chevrons, a speech-bubble "message" shape, bevel, frame and a close "X". Once you drag any point the shape becomes custom, and you can keep editing it.

Editing points

+ Add point inserts a new point halfway between the selected point and the next one, so the outline does not change until you move it.
Remove point deletes the selected point. A polygon needs at least three.
With a handle focused, the arrow keys move it by 1% (5% with Shift). The readout under the buttons shows the exact position.

Circle, ellipse and inset

Circle takes a radius and a center; Ellipse has separate X and Y radii. Inset cuts a rectangle in from each edge and can round its corners in pixels, a quick way to crop an image with rounded corners without an extra wrapper.

Tips and common mistakes

Shadows and outlines get clipped. clip-path removes everything outside the shape, including box-shadow, borders and focus outlines. For a shadow, wrap the element and put filter: drop-shadow() on the wrapper, which follows the clipped outline.
Hidden areas do not receive clicks. Pointer events only hit the visible shape, which is good for shaped buttons but can surprise you on large clipped images.
Keep the aspect ratio. The preview box is square. On a wide element the same percentages stretch the shape; add aspect-ratio: 1 to keep a regular hexagon or star.
Animating polygons. Browsers can transition between two polygon() values only when both have the same number of points. Use + Add point to give the start shape as many points as the target shape.
Layout is unchanged. The element still occupies its full rectangle, so neighboring content does not flow into the cut-away corners.

When to use clip-path vs other techniques

For rounded corners and organic blobs, use border-radius; borders and shadows then follow the curve.
For a small arrow on a tooltip, the classic border trick from the CSS triangle generator needs no clipping at all.
For shapes with curves, holes or soft edges, an SVG or a CSS mask is more flexible than basic shapes.
For reveal and wipe effects, clip-path pairs well with keyframes from the CSS animation generator.

Privacy

The shape is edited and the CSS generated entirely in your browser. The sample photo background is built into the page, and nothing is uploaded.

Frequently asked questions

Why did my box-shadow disappear after adding clip-path?

clip-path hides everything outside the shape, and the shadow is outside it. Wrap the clipped element in a parent and apply filter: drop-shadow() to the parent; the filter follows the visible outline of the child.

Can I use clip-path on images and videos?

Yes. clip-path works on any element, including img, video, canvas and elements with background images. The media is cropped to the shape without editing the file.

Can I use pixels instead of percentages?

Yes. polygon(), circle(), ellipse() and inset() all accept px, em and other lengths, and you can mix them with percentages. The generator outputs percentages so the shape scales with the element; edit the copied values if you need fixed sizes.

Does the generator support path() or custom SVG shapes?

No, it produces the four basic shapes. CSS also accepts clip-path: path() with SVG path data, or url(#id) pointing to an SVG clipPath element, for curved outlines.

How do I animate a clip-path reveal?

Transition or animate between two shapes of the same type, for example inset(0 100% 0 0) to inset(0 0 0 0) for a left-to-right wipe. Polygons must have the same number of points in both states.

CSS Clip Path Generator