Should I use percentages or pixels?

Percentages are relative to the element’s own width and height, so the shape scales with the element — the usual choice for responsive layouts. Pixels give a fixed shape, which suits fixed-size icons or buttons. When you pick px, the tool converts from the reference width and height you enter. A circle’s percentage radius is measured against the diagonal ÷ √2, which equals the side length for a square.

Do I still need -webkit-clip-path?

Current Chrome, Edge, Firefox and Safari all support unprefixed clip-path with basic shapes. The -webkit- prefix only matters for Safari versions before 13.1. The tool outputs both lines by default; the prefixed one comes first and doesn’t affect modern browsers.

Can the clipped area still be clicked? Does it affect layout?

clip-path changes only what’s visible and clickable: the clipped-away part is not painted and doesn’t receive clicks or hover, but the element keeps its full size in the layout, so nothing around it moves. To make text flow around a shape, use shape-outside as well.

Can I add a border or shadow to a clipped element?

Not directly — border and box-shadow are clipped too. A common trick is a wrapper with the same clip-path and a background color, with the inner element clipped slightly smaller to form the border. For shadows, put filter: drop-shadow() on a parent; it follows the clipped shape. clip-path can also be animated with transitions as long as both polygons have the same number of points.

🔶

🔶CSS clip-path Generator - Drag Polygons, Circles & Insets

clip-path cuts any element into a polygon, circle, ellipse or rounded rectangle — handy for angled banners, hexagon avatars, arrow buttons, speech bubbles and other non-rectangular images, with no extra images or SVG. Here you edit the shape directly on an image: drag points to move them, double-click near an edge to insert a point, right-click or Alt-click to delete one, nudge the selected point with the arrow keys, or snap to a 5% grid. Circles and ellipses have center and radius handles, and inset has four draggable edges plus a corner radius. 25 presets are built in — triangle, trapezoid, parallelogram, rhombus, pentagon through decagon, bevel, rabbet, star, left and right arrows, chevrons, cross, close (X), message bubble, frame, tag and ribbon — and you can generate a regular polygon or star with any number of sides. Preview on your own uploaded image, with the clipped-away area shown faintly. The CSS can use percentages or pixels (converted from the reference size you set), optionally with a -webkit-clip-path line for older Safari, and you can paste an existing polygon(...) to keep editing it.

Free · No sign-up · Runs in your browserLast updated: 2026-10-26

Loading tool...

How to use CSS clip-path Generator

1Choose a shape type or click a preset, and optionally upload your own image
2Drag points or handles on the image; double-click an edge to add a point, right-click to remove one
3Pick % or px and whether to add the -webkit- prefix, then copy the CSS

FAQ

Should I use percentages or pixels?: Percentages are relative to the element’s own width and height, so the shape scales with the element — the usual choice for responsive layouts. Pixels give a fixed shape, which suits fixed-size icons or buttons. When you pick px, the tool converts from the reference width and height you enter. A circle’s percentage radius is measured against the diagonal ÷ √2, which equals the side length for a square.
Do I still need -webkit-clip-path?: Current Chrome, Edge, Firefox and Safari all support unprefixed clip-path with basic shapes. The -webkit- prefix only matters for Safari versions before 13.1. The tool outputs both lines by default; the prefixed one comes first and doesn’t affect modern browsers.
Can the clipped area still be clicked? Does it affect layout?: clip-path changes only what’s visible and clickable: the clipped-away part is not painted and doesn’t receive clicks or hover, but the element keeps its full size in the layout, so nothing around it moves. To make text flow around a shape, use shape-outside as well.
Can I add a border or shadow to a clipped element?: Not directly — border and box-shadow are clipped too. A common trick is a wrapper with the same clip-path and a background color, with the inner element clipped slightly smaller to form the border. For shadows, put filter: drop-shadow() on a parent; it follows the clipped shape. clip-path can also be animated with transitions as long as both polygons have the same number of points.