Clip-path Generator

How to use it

1. Pick a shape function: polygon, circle, ellipse or inset.
2. For polygon, edit the points directly: each point is an x and a y value separated by a space, and points are separated by commas, such as 50% 0%, 100% 100%, 0% 100%.
3. Click a preset to load a common polygon: triangle, trapezoid, rhombus, pentagon, hexagon, star, arrow, chevron or message bubble.
4. For circle, set the radius and center. For ellipse, set two radii and the center. For inset, set the four edges and an optional round radius.
5. Watch the preview box update with the same clip-path, and read the current value under it.
6. Copy the CSS from the output card.

Common use cases

• Section dividers - slanted or arrow-shaped bands between page sections.
• Card and image masks - clip photos into hexagons, stars or message bubbles.
• Ribbons and badges - chevron shapes for pricing or feature callouts.
• Avatar frames - circle and ellipse crops without border-radius tricks.
• Teaching clip-path - see how each point maps to the box edges.

Why it stays private

Points and radii are parsed and re-serialized into a CSS string in this page. Nothing is uploaded, and the tool works offline.

FAQ

Q: Which shapes can the tool build? A: polygon() with editable points, circle(), ellipse() and inset() with an optional round radius. Presets load common polygons: triangle, trapezoid, rhombus, pentagon, hexagon, star, arrow, chevron and message bubble.

Q: What point syntax is accepted? A: Each point is an x and a y value separated by a space, and points are separated by commas. Values may be percentages or lengths such as px, em, rem, vw or vh, and a polygon needs between 3 and 20 points. The tool checks the syntax and reports the first problem it finds.

Q: Does the preview show the final render? A: Yes. The preview is a real element with the same clip-path applied to a gradient background. Percentages relate to the preview box size, so pasting into a differently sized element changes the result.

Q: Why does the output include a -webkit- line? A: Modern browsers support unprefixed clip-path for basic shapes. The prefixed line is kept for older Safari and Android versions and does no harm where unprefixed support exists.