CSS Clip Path Generator

Choose a shape, see what is cut away against the dashed outline of the original box, and copy a one-line clip-path rule.

Runs in your browserFree, no sign-upLast reviewed October 8, 2026

Live preview

CSS

.element {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: #4f46e5;
}

Values

clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)
Shape type: polygon()
Fill: #4f46e5

Quick answers

What does clip-path do in CSS?: It hides every part of an element that falls outside a shape you define. The element keeps its size and position in the layout, but only the area inside the shape is drawn and only that area responds to clicks.
What is the clip-path for a hexagon?: clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%). On a square element it is slightly taller than a regular hexagon; give the element a width to height ratio of about 1.155 to 1 for six equal sides.
How do I make a circle with clip-path?: Use clip-path: circle(50% at 50% 50%) on a square element. The first value is the radius and the pair after at is the centre. With Size at 80 this tool gives circle(40% at 50% 50%).
How do polygon() coordinates work?: Each point is an x y pair measured from the element's top-left corner: 0% 0% is top left, 100% 0% is top right and 100% 100% is bottom right. Points are joined in the order listed and the last connects back to the first.
Does clip-path work in all browsers?: The basic shapes used here, polygon(), circle(), ellipse() and inset(), work without a prefix in current versions of Chrome, Edge, Firefox and Safari. The generated rule contains only the standard property.
Can I put a border or box-shadow on a clipped element?: Not directly. Borders and box-shadows are clipped along with everything else outside the shape. For a shadow, wrap the element and put filter: drop-shadow() on the wrapper. For an outline, stack a slightly larger clipped element behind it.

What Clip Path Generator does

This clip path generator outputs the CSS for 16 ready-made shapes: twelve polygons (triangle, rhombus, pentagon, hexagon, heptagon, octagon, star, chevron, arrow, speech bubble, parallelogram and trapezoid) and four basic shapes (circle, ellipse, inset rectangle and inset with rounded corners). Pick one and you get a rule such as clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%) for the hexagon. All coordinates are percentages of the element's own box, so the shape scales with whatever you apply it to. The polygons are fixed presets; there are no draggable points. The Size slider changes only the circle, ellipse and inset shapes.

CSS clip-path polygon shapes and their coordinates

These are the twelve polygon presets exactly as the tool outputs them. Paste the value after clip-path: in your stylesheet.

Shape	Points	clip-path value
Triangle	3	polygon(50% 0%, 0% 100%, 100% 100%)
Rhombus	4	polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)
Parallelogram	4	polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%)
Trapezoid	4	polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%)
Pentagon	5	polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)
Hexagon	6	polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)
Chevron	6	polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%)
Heptagon	7	polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%)
Arrow	7	polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%)
Speech bubble	7	polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%)
Octagon	8	polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%)
Star	10	polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)

The arrow and chevron point right. To point them the other way, add transform: scaleX(-1) or rotate the element; the clip moves with it, and so does any text inside, which scaleX(-1) mirrors.

Circle, ellipse and inset values at each Size setting

The Size slider drives the four basic shapes. The circle radius is half the Size, the ellipse is half the Size wide and a third of it tall, and the inset is half of what is left over.

Size	Circle	Ellipse	Inset rectangle	Inset with rounded corners
100%	circle(50% at 50% 50%)	ellipse(50% 33.3% at 50% 50%)	inset(0%)	inset(0% round 16px)
80%	circle(40% at 50% 50%)	ellipse(40% 26.7% at 50% 50%)	inset(10%)	inset(10% round 16px)
60%	circle(30% at 50% 50%)	ellipse(30% 20% at 50% 50%)	inset(20%)	inset(20% round 16px)
50%	circle(25% at 50% 50%)	ellipse(25% 16.7% at 50% 50%)	inset(25%)	inset(25% round 16px)
20%	circle(10% at 50% 50%)	ellipse(10% 6.7% at 50% 50%)	inset(40%)	inset(40% round 16px)

The centre is always 50% 50% and the rounded inset always uses a 16px corner. Edit those numbers in the copied rule to move the shape or change the rounding. At 100%, inset(0%) clips nothing and inset(0% round 16px) simply rounds the corners.

Why a clip-path shape looks stretched on a rectangle

Every percentage in a polygon is measured against the element's own box: x values against its width and y values against its height. The presets are drawn on a square, and the preview here is a 260px square, so a shape that looks regular in the tool is stretched sideways on a wide element and squeezed on a tall one. To keep the proportions, set aspect-ratio: 1 / 1 on the element or give it equal width and height.

Two presets need a ratio other than square to be geometrically regular. The triangle has three equal sides, and the hexagon has six, when the element's width is about 1.155 times its height, so use aspect-ratio: 1.155 / 1.

The circle behaves differently. A percentage radius is not taken from the width or the height but from a blend of the two: the square root of (width squared plus height squared), divided by the square root of 2. On a square that equals the side length, so 50% is a circle that touches all four edges. On a 400px by 200px element the same 50% works out at a radius of about 158px, which is larger than half the height, so the top and bottom of the circle are cut flat. Swap the percentage for the closest-side keyword, circle(closest-side at 50% 50%), to get the largest full circle that fits.

The ellipse and inset shapes do use the two dimensions separately: ellipse(50% 33.3%) is half the width across and a third of the height up, and inset(10%) removes 10% of the height from the top and bottom and 10% of the width from each side.

What changes when an element is clipped

Clicks and hovers follow the shape. The cut-away corners of a hexagonal button do not respond, and pointer events there go to whatever is underneath.
Layout does not change. The element still reserves its full rectangle, so neighbouring content does not flow into the removed area.
Children are clipped too. Text, images and positioned descendants are all cut to the shape, including anything that overflows the box, such as a tooltip or dropdown menu.
Borders, outlines and box-shadows are cut off wherever they fall outside the shape. A focus outline on a clipped button will be invisible, so provide a different focus style.
Screen readers and in-page search still find clipped text. Clipping is visual only and is not a way to remove content.
Transitions work between two shapes of the same type with the same number of points. Hexagon to chevron animates smoothly because both have six points; polygon to circle jumps.

Using the copied rule on real elements

Hexagonal avatar

Shape: Hexagon. Copy the clip-path line onto an img element with equal width and height and object-fit: cover.

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

The image stays a real img with alt text, so nothing is flattened into a pre-cut picture.

Circular crop smaller than the box

Shape: Circle, Size: 75, Fill: #0ea5e9

clip-path: circle(37.5% at 50% 50%); background: #0ea5e9;

Breadcrumb or process step

Shape: Chevron

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

On a wide, short element the 25% notch becomes very long. Replace 75% with calc(100% - 20px) and 25% with 20px for a fixed-size point.

Reveal from the centre on hover

Shape: Inset rectangle at Size 60 for the resting state and Size 100 for the hover state

clip-path: inset(20%); changing to clip-path: inset(0%);

Add transition: clip-path 300ms ease. Both states are inset(), so the change animates.

Step by step

1
Open the Shape list and choose a preset from the Polygon group or the Basic shape group.
2
For a circle, ellipse or inset shape, drag Size between 20% and 100% to shrink or grow the visible area. Polygon presets ignore this slider.
3
Pick a Fill for the preview shape.
4
Leave Show the clipped-away area ticked to keep the dashed outline of the full box visible, so you can see how much is removed.
5
Copy the .element rule. Keep the clip-path line and drop the background line if your element already has its own background or image.

Common questions

Can I drag points or draw a custom polygon here?

No. The tool offers fixed presets only. To customise a shape, copy the nearest preset and edit the percentages by hand: each pair is x then y from the top-left corner, so raising a y value moves that point down.

Why does the Size slider do nothing for my shape?

Size applies only to Circle, Ellipse, Inset rectangle and Inset with rounded corners. The twelve polygon presets always span the full box. To make a polygon smaller, reduce the element's width and height instead.

What is the difference between clip-path and mask?

clip-path cuts along a hard geometric edge: a point is either inside the shape or outside it. mask-image uses an image or gradient whose transparency controls visibility, so it can fade an element out gradually. Use clipping for crisp shapes and masks for soft edges.

Can I round the corners of a polygon?

Not with polygon() itself, which only draws straight lines between points. The inset() shape accepts a round value, as in inset(10% round 16px), and that is the only preset here with curved corners apart from the circle and ellipse.

Does clip-path work on images and video?

Yes. It applies to any element, including img, video, iframes and elements with background images. The media keeps playing or loading normally; only the visible area changes.

How do I make a diagonal section edge with clip-path?

Use a four-point polygon and lower one of the corners. None of the presets is a slanted section, but the pattern is short: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%) keeps the top edge straight and slopes the bottom edge.

Is clip-path better than the CSS border triangle trick?

For most uses, yes. A clipped triangle is a normal element that can hold a background image, gradient or text and scales with percentages. The border method produces a zero-size box built from coloured borders, which is harder to size and cannot contain content.