CSS toolsClip-path generator
CSS Clip-path Generator
Pick a starting shape, then drag its points: this CSS clip-path generator rewrites the polygon() as you move them and clips the preview to match. Every point can also be moved with the arrow keys (hold Shift for bigger steps), and circles and ellipses are one click away.
How to use the clip-path generator
Choose the shape closest to what you need: a triangle, a hexagon, a speech bubble, a chevron.
Drag any point on the preview. The coordinates are percentages, so the shape scales with the element.
For fine work, click a point and nudge it with the arrow keys; Shift moves it 10% at a time.
Copy the clip-path line onto the element you want to cut: an image, a card or a section background.
The CSS clip-path shape functions
polygon() takes a list of points, each an x and a y measured from the top left corner of the element. 50% 0 is the middle of the top edge and 100% 100% the bottom right corner. The browser joins the points in order and closes the shape, so three points give a triangle and the order decides whether the edges cross.
circle(50% at 50% 50%) cuts a circle with the given radius around a centre point, and ellipse(45% 30% at 50% 50%) takes a horizontal and a vertical radius. inset(10px round 12px) trims the edges of the box and can round the corners of what remains.
Whatever falls outside the shape is not painted and does not react to the mouse, so a clipped button is only clickable inside its shape.
Where a CSS clip-path helps
Slanted section edges on landing pages, hexagon or circle avatars without editing the images, arrow-shaped breadcrumb steps, speech bubbles and image reveals that animate from a thin line to the full picture are all one clip-path rule. Because the image itself is unchanged, you can swap the picture without touching the shape, and the shape adapts to any size since its points are percentages.
Questions
- Does clip-path work in all browsers?
- The basic shapes in this tool, polygon(), circle(), ellipse() and inset(), work without a prefix in current Chrome, Edge, Firefox and Safari. Very old Safari versions needed -webkit-clip-path.
- Can I animate a clip-path?
- Yes, between two shapes of the same kind with the same number of points: polygon to polygon with equal point counts, or circle to circle. Add transition: clip-path 0.4s to the element and change the value on hover.
- Why are the shadow and border of my element gone?
- clip-path hides everything outside the shape, including box-shadow, outline and borders that fall outside it. Put the clip on an inner element, or use filter: drop-shadow() on a parent to shade the clipped shape.
- Can I clip with a curve or an SVG path?
- clip-path also accepts path() with SVG path data, and url(#id) pointing to an SVG clipPath element, for curves that polygons cannot draw.