Clip-Path Generator

How to use the clip-path generator

1. Choose a Shape: Polygon, Circle, Ellipse or Inset. The faded layer shows the whole element, the bright one shows what stays visible after clipping.
2. Drag the dots in the editor. For a polygon, each dot is a corner; click anywhere in the area to add a point on the nearest edge. For a circle or an ellipse, drag the center and the radius dots. For an inset, drag the four edge dots.
3. Fine-tune in the fields below: the Points list (X and Y in percent, with Remove and Add point) for polygons, or the Radius, Center X, Center Y, Top, Right, Bottom, Left and Rounded corners (px) fields for the other shapes.
4. Start faster with the Presets: triangle, trapezoid, parallelogram, rhombus, pentagon, hexagon, octagon, bevel, star, cross, arrows, chevron, speech bubble, circle, ellipse and inset.
5. Tick Snap to 5 % for tidy values, and Add -webkit-clip-path (old Safari) if you still support Safari 13.0 or older.
6. Optionally drop a photo in Background image (optional) to see the shape on your own image. The file is never uploaded.
7. Copy the CSS code with Copy.

Keyboard: focus a dot, move it with the arrow keys (1 %, or 10 % with Shift) and press Delete to remove a polygon point. A polygon keeps at least three points.

The clip-path shape functions

clip-path hides everything outside a shape. The element keeps its size in the layout; only the painting and the clickable area are clipped.

• polygon(x1 y1, x2 y2, …) joins the points in order and closes the shape. polygon(50% 0%, 100% 100%, 0% 100%) is a triangle pointing up. Coordinates start at the top-left corner of the element.
• circle(r at cx cy): circle(50% at 50% 50%) is the largest circle centered in the element. A percentage radius is relative to the element’s diagonal divided by √2, so it equals a share of the width only for square elements.
• ellipse(rx ry at cx cy): the horizontal radius is a share of the width, the vertical one a share of the height.
• inset(top right bottom left round radius) cuts a rectangle inside the edges, with the same one-to-four value shorthand as margins and optional rounded corners.

This tool writes percentages, so the shape scales with the element whatever its size.

Tips for good shapes

• The order of polygon points matters: going around the edge clockwise (or counter-clockwise) avoids crossed, “bow-tie” shapes.
• Two shapes with the same number of points can be animated: transition: clip-path 0.4s morphs a hexagon into another hexagon smoothly. The browser cannot interpolate between polygons with different point counts.
• clip-path also clips box-shadow and borders. To give a clipped shape a shadow, put filter: drop-shadow() on a parent element.
• Clipped areas do not receive clicks or hovers, which is handy for irregular buttons.