CSS Clip Path Generator

Draw polygon, circle and ellipse clip-path shapes with draggable points, or start from a preset.

3 points

Add point puts a new point halfway along the longest edge. A polygon needs 3 to 30 points.

Shapes

Preview

Drag the numbered points, or Tab to one and use the arrow keys (hold Shift for 10% steps). Delete or Backspace removes the point.

CSS

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

With the -webkit- prefix

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

Current browsers only need the plain clip-path line; the prefixed copy is for older Safari versions.

CSS triangle with borders (the older way)

Before clip-path, triangles were drawn as a zero-size element whose thick borders meet at an angle. This version is 100 × 100 px in #6d28d9; it can only be a solid colour, and you change its size by editing the border widths.

Border triangle CSS

width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #6d28d9;

Next steps

Cut an element into a shape with CSS clip-path

CSS Clip Path Generator shows a shape on a sample square and writes the clip-path code for it: a polygon whose points you drag or move with the keyboard, or a circle, ellipse or inset rectangle set with sliders. Fifteen ready-made polygons — triangles, arrows, a star, a speech bubble and more — give you a quick start.

Everything runs in your browser. Nothing is uploaded or saved.

How to draw a clip-path shape

Choose Polygon, Circle, Ellipse or Inset. Polygon starts as a triangle pointing up.
For a polygon, pick a shape, then drag the numbered points. With a keyboard, Tab to a point and use the arrow keys to move it 1% (Shift for 10%); Delete or Backspace removes it.
Add point puts a new point halfway along the longest edge. A polygon can have 3 to 30 points.
For Circle, Ellipse and Inset, use the sliders or type whole percentages.
Copy the CSS — plain, or with a -webkit- prefixed copy from the second box.

Reading the generated clip-path

Polygon: polygon(50% 0%, 100% 100%, 0% 100%) lists each point as x then y, from the element’s top-left corner.
Circle and ellipse: circle(50% at 50% 50%) gives the radius, then the centre after at; ellipse() has a horizontal and a vertical radius.
Inset: inset(10% 10% 10% 10%) moves the top, right, bottom and left edges inwards; rounding above 0 adds round and a percentage.
Whole percentages: points snap to whole numbers from 0 to 100%, so the shape scales with the element and never gets long decimals.
CSS triangle alternative: with one of the four triangles selected, a collapsible section also shows the older border-based triangle CSS.

What people use clip-path for

Shaped sections and photos: a slanted banner edge, or a hexagon around a profile picture.
Arrows, chevrons and badges: step indicators, tags and stars without image files.
Reveal effects: clip-path can be animated between polygons that have the same number of points.

Tips for clean shapes

Use a square element for symmetrical shapes: percentages stretch with the element, so a hexagon on a wide box becomes wide too.
Expect shadows to be clipped: anything outside the shape is hidden, including box-shadow. Put the shadow on a wrapper, using filter: drop-shadow() there.
Give the shape a fill: a colour, image or a gradient from the CSS Gradient Generator, like the violet-to-cyan preview here.

How clip-path works

Clipping hides, it doesn’t resize

The element keeps its full size in the layout; only the part inside the shape is painted, and clicks outside the shape don’t reach the element.

The border triangle trick

Before clip-path, triangles were made from an element with zero width and height and thick borders: the borders meet at an angle, and making three of them transparent leaves a triangle. The version shown is 100 × 100 px in #6d28d9; it can only be a solid colour, and its size comes from the border widths.

Clip-path support in browsers

clip-path with polygon(), circle(), ellipse() and inset() works unprefixed in all current versions of Chrome, Edge, Firefox and Safari. Older Safari versions only understood -webkit-clip-path, hence the prefixed copy.

CSS Clip Path Generator: common questions

How do I make a CSS triangle?

Click Triangle up, down, left or right and copy the clip-path line. For the classic version without clip-path, open the border triangle section that appears under the code.

Can I use px or decimals for the points?

The tool uses whole percentages so shapes scale with the element. clip-path also accepts px and other lengths if you edit the copied CSS by hand.

How do I remove a point?

Focus it with Tab or a click and press Delete or Backspace; focus moves to the previous point. A polygon always keeps at least three.

Why is my circle cut off on a wide element?

A circle radius in percent is measured against a size based on the box’s diagonal. On the square preview 50% is half the width, but on a wide element it can reach past the top and bottom. Use Ellipse to stretch with the element.

What happens if I type a value outside the range?

The field is outlined, a message gives the range — 0 to 100% for circle and ellipse, 0 to 50% for inset sides and rounding — and the code boxes pause until it’s fixed.

Can I clip an image I upload?

No, the preview is always a gradient square and nothing is uploaded; apply the CSS to your own image. The Box Shadow Generator and other design tools work the same way.