CSS Clip-Path Generator

About this tool

Polygon vertex editor

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

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%);

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 supports older Safari versions; modern browsers all support clip-path natively.

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 CSS spec (Clip-Path Module Level 1, 2014) accepts polygons, circles, ellipses, insets, and even external SVG paths. 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. The transformation is GPU-accelerated on modern browsers, performant even for animations. Use cases: hero-image diagonal banners, message-bubble cards, decorative section dividers, hexagon avatar grids, arrow buttons.

Polygon vs other clip-path syntaxes

CSS clip-path supports five shape functions. 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 focuses on polygons because they cover 80%+ of real-world use cases.

clip-path is GPU-accelerated. You can animate the polygon shape transitioning between two states. Hover effects, scroll-driven reveals, page transitions — all possible with pure CSS.

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). Combined with: GSAP MorphSVG plugin for advanced shape morphing; Framer Motion clip-path animations; CSS @keyframes for simple state transitions.

Browser compatibility + accessibility

clip-path with polygon() is supported in all modern browsers (Chrome 24+, Firefox 35+, Safari 10+, Edge 79+). Older Safari versions (pre-10) needed -webkit-clip-path prefix; this tool outputs both for safety. 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: even though only the polygon is visible, the FULL rectangular element still receives click events outside the polygon. Use pointer-events: none on hidden regions if needed, or set clip-path on a non-interactive wrapper.

10 Things to Know About CSS Clip-Path

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

5 shape functions: polygon, circle, ellipse, inset, path — polygon covers 80% of real use cases.

GPU-accelerated on modern browsers — performant for animations + transitions.

Animatable — interpolates between two shapes IF vertex counts match.

Modern browser support: Chrome 24+, Firefox 35+, Safari 10+, Edge 79+. Use -webkit-clip-path for older Safari.

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

Clipped elements still receive click events outside the visible polygon — set pointer-events: none if needed.

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

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

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.
Yes, modern browsers GPU-accelerate clip-path animations on layout-stable elements. Best practice: pair with will-change: clip-path on the element being animated to hint the browser. Watch out: animating clip-path on an element that also changes layout (resizing parent) loses GPU optimisation. Keep clip-path animations on stable-sized elements for smooth 60fps.
Modern browsers (Chrome 24+, Firefox 35+, Safari 10+, Edge 79+) support polygon() natively. Older Safari (pre-10) needed -webkit-clip-path; this tool outputs both for safety. 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 (RT-DEV-085) for depth; CSS Cubic-Bezier Editor (RT-DEV-086) for animation easing; CSS Gradient Generator (RT-DEV-050) for backgrounds; WCAG Contrast Checker (RT-DEV-080) for accessibility. External: clippy (bennettfeely.com/clippy) — original clip-path generator inspiration; Figma + Sketch for vector design; GSAP MorphSVG for advanced shape animation.

CSS Clip-Path Generator