CSS Clip-Path Generator

CSS CLIP-PATH FRONTEND POLYGON SHAPES
Share:
By Checked against sources by , Founder & Architect, RECATOOLS Published Updated Last reviewed

Visual CSS clip-path polygon editor. Drag vertices to shape the clip; load preset shapes (triangle, hexagon, star, arrow, message bubble, chevron). Live preview + copy-paste CSS.

RT-DEV-087 · Developer Tools
Your browser is too old for this tool’s interactive features. Please update to Safari 13.1, Chrome or Edge 80, Firefox 74 or newer.

CSS Clip-Path Generator

Presets:
Drag the numbered vertices to shape the polygon.
Live preview 
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
-webkit-clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
Advertisement
After results · AD-W1Responsive · Post-tool — peak engagement

How to use the Clip-Path Generator

Start from a preset

12 ready-made shapes: triangle, pentagon, hexagon, octagon, 5-point star, message bubble, arrow, chevron, diagonal banner. Pick the closest match to your target shape; tweak from there.

Drag vertices to refine

The numbered handles are the polygon's vertices. Drag them on the editor; the right side preview updates live. Coordinates are stored as percentages — works on any element size. Vertices clamp to the 0-100% range.

Add or remove vertices

Complex shapes need more points. New vertex always added between the last and first existing points; drag it into place. Remove the last vertex with the "−" button. Minimum 3 vertices (triangle).

Copy the CSS

Click "Copy CSS" to get both clip-path and -webkit-clip-path declarations. Paste into your stylesheet. The webkit prefix covers Safari before 13.1; current browsers all support clip-path unprefixed.

Advertisement
After how-to · AD-W2Responsive

CSS clip-path — non-rectangular elements without SVG

Web layouts historically forced everything into rectangles. border-radius let us make circles + rounded corners; clip-path finally enables arbitrary polygon shapes. The property is defined in CSS Masking Module Level 1; it accepts basic shapes (polygons, circles, ellipses, insets), SVG paths and references to SVG clipPath elements. Polygon clipping — the most common use — accepts an arbitrary list of x,y vertex coordinates as percentages, defining the visible region. Anything outside the polygon is hidden. Use cases: hero-image diagonal banners, message-bubble cards, decorative section dividers, hexagon avatar grids, arrow buttons.

Polygon vs other clip-path syntaxes

The shapes you will reach for most are these five. polygon(x1 y1, x2 y2, ...): arbitrary multi-vertex shape (this tool). circle(radius at x y): perfect circle clipping. ellipse(rx ry at x y): elliptical clipping. inset(top right bottom left round corner-radius): rectangular clipping with optional rounded corners — useful for keyhole effects. path("svg-path-d"): arbitrary SVG path syntax (full curve support). For most polygon shapes: polygon() is simplest. For curves: path() with SVG syntax. For circular/elliptical: dedicated functions. This tool edits polygons, the shape that is hardest to write by hand.

Two polygons with the same number of vertices interpolate smoothly, so a hover effect or a reveal needs nothing but CSS — and the clipped-away area stops receiving clicks, too.

Animating clip-path

clip-path can be transitioned + animated like any other property — as long as the start + end shapes have the SAME number of vertices. Browsers interpolate vertex positions between states. Use cases: hover-reveal effects, scroll-triggered reveals, page transitions, button morph animations. Limitation: animating between different vertex counts produces broken interpolations. Workaround: pre-define both shapes with the same vertex count (some can be "stacked" at the same position to effectively have fewer visible vertices). Plain CSS transitions and @keyframes are enough for most of these.

Browser compatibility + accessibility

clip-path with polygon() on HTML elements works unprefixed in Chrome 55+, Firefox 54+, Safari 13.1+ and Edge 79+ (caniuse); Chrome from 24 and Safari from 7 supported it only as -webkit-clip-path, which this tool also outputs. Accessibility considerations: clip-path hides visual pixels but doesn't affect the DOM. Screen readers + keyboard navigation still find clipped content — be careful with hidden interactive elements. Hit test areas: the clipped-away part is not clickable — CSS Masking says pointer events must not be dispatched on the clipped-out region, so a triangle only takes clicks inside the triangle. If you need the full rectangle to stay clickable, clip a child element instead.

polygon() and four other shapes, vertex matching, and why the clipped corner stops taking clicks

01

clip-path: polygon(x1 y1, x2 y2, ...) defines arbitrary multi-vertex shapes via percentage coordinates.

02

The everyday shapes: polygon, circle, ellipse, inset, path — plus url() to an SVG clipPath.

03

Specified in CSS Masking Module Level 1, a W3C Candidate Recommendation Draft (August 2021).

04

Animatable — interpolates between two shapes IF vertex counts match.

05

Unprefixed support for shapes: Chrome 55+, Firefox 54+, Safari 13.1+ and Edge 79+. Older Chrome and Safari need -webkit-clip-path.

06

Common uses: hero banners, message bubbles, hexagon avatars, arrow buttons, decorative dividers.

07

The clipped-out region does not receive clicks: the spec forbids dispatching pointer events there.

08

Screen readers see content regardless of clip-path — don't use to "hide" accessibility content.

09

For curves + complex paths: use path("svg-d-string") instead of polygon.

10

clip-path vs mask: clip-path uses geometric shapes; mask uses image alpha — different use cases, both useful.

Frequently Asked Questions

  • clip-path: shaping CSS-styled HTML elements (divs, images, sections). Keeps text + accessibility content intact behind the shape. SVG: when you need vector graphics with strokes, complex curves, gradients, multiple shapes per element, or text following paths. Both have similar visual capabilities; clip-path is simpler for "make this rectangular element non-rectangular." SVG is more powerful for true vector art.

  • clip-path hides visual pixels but doesn't change the element's bounding box for hit testing. Clicks outside the visible polygon but inside the rectangular bounds still register. Two fixes: (1) Set pointer-events: none on hidden regions; clip-path then only the visible part receives clicks. (2) Use SVG shapes for true geometric hit testing. For most decorative use cases (non-interactive shapes), the difference doesn't matter.

  • Yes, with a constraint: start + end shapes must have the SAME number of vertices. Browser interpolates between vertex positions. Example use cases: button hover effects that morph rectangles into diamonds, scroll-triggered shape reveals, page transition effects. Workaround for different vertex counts: pre-define both shapes with the higher vertex count; "extra" vertices in one state collapse to the same point. This is more complex but possible.

  • Use the dedicated circle() function instead of polygon: clip-path: circle(50% at center). Or border-radius: 50% — even simpler for full circles on square elements. For ellipses: clip-path: ellipse(40% 30% at center) (width radius, height radius, position). For polygon approximation of circle: 12-24 vertices around a circular path; less efficient than circle() but allows animation between polygon + circular states.

  • overflow: hidden: clips child elements to the parent's rectangular box. Standard CSS layout tool. clip-path: clips the element itself to an arbitrary shape, including its own visible pixels. Use clip-path: when you want non-rectangular shape, including the element's background + borders. Use overflow: when you want to hide overflowing children of a regular rectangular container.

  • Usually, if the shapes interpolate (same vertex count) and the element's size stays put. Whether the browser can run the animation without repainting varies by browser and version, so test on the slowest device you care about — and prefer animating transform and opacity where they can do the job.

  • Current browsers (Chrome 55+, Firefox 54+, Safari 13.1+ and Edge 79+) support polygon() unprefixed. Older Chrome and Safari needed -webkit-clip-path; this tool outputs both. For IE11 + ancient browsers: clip-path is unsupported; element renders as the underlying rectangle. Best practice: clip-path should be progressive enhancement — design so the rectangular fallback still looks acceptable. Don't put critical content where the clip-path is the only thing hiding it.

  • Yes — clip-path: path("M 10 10 L 90 90 ...") uses SVG's "d" path syntax. Supports cubic + quadratic Bezier curves, arcs, line segments. More powerful than polygon for curved shapes. Trade-off: harder to author manually; visual editors like this tool focus on polygon for accessibility. For complex curves, design in Figma + export SVG, then extract the d attribute for use in clip-path.

  • No. All calculations run in your browser via JavaScript. Open DevTools → Network and confirm zero outbound requests. Vertex data stays on your device. Safe for confidential design work.

  • Pair with: CSS Box Shadow Generator for depth; CSS Cubic-Bezier Editor for animation easing; CSS Gradient Generator for backgrounds; WCAG Contrast Checker for accessibility.

Method & sources

How it computes

A polygon edited by dragging vertices, each clamped to 0–100% of the box, from 12 presets or added one at a time; the output is clip-path: polygon(...) plus the same -webkit-clip-path declaration for older Chrome and Safari.

What this tool implements

  • CSS Masking Module Level 1: pointer events must not be dispatched on the clipped-out region — the page said the whole rectangle still took clicks and advised pointer-events: none.
  • caniuse: shapes in clip-path work unprefixed from Chrome 55, Firefox 54, Safari 13.1 and Edge 79 — the page gave Chrome 24, Firefox 35 and Safari 10.
  • Polygons interpolate only when both shapes have the same number of vertices.

Sources

Advertisement
Pre-footer · AD-W3 728 × 90