How do I make a clipped image clickable only on the visible region?

Default click target is the bounding box. Use shape-outside with the same path, or layer a transparent SVG with the path on top.

No. The generator runs in your browser. Shape coordinates and demo image stay in your tab.

CSS Clip Path Generator: Visual Polygon Editor [2026]

Q: Can I animate clip-path?

Yes — modern browsers GPU-accelerate it. Animating between two polygon() shapes works when both have the same vertex count.

Q: Does clip-path work in all browsers in 2026?

Yes for polygon, circle, ellipse, inset. path() in Chrome 88+ and Safari 13.1+. shape() partial — Chrome 116+ and Safari 17.4+.

Q: What's the difference between clip-path and mask-image?

clip-path uses geometric functions with hard edges. mask-image uses images (PNG/SVG) and supports soft edges and gradients.

Q: Why does my box-shadow disappear with clip-path?

clip-path clips the entire output including shadows. Fix: wrap in a parent and use filter: drop-shadow() instead.

TL;DR: CSS clip-path defines a region that an element is rendered inside — anything outside that region is clipped (transparent). Shapes can be a polygon (polygon(0 0, 100% 0, 100% 50%)), circle (circle(50% at 50% 50%)), ellipse, or inset rectangle. Our free CSS clip-path generator ships 18 presets (hexagon, arrow, talk bubble, parallelogram, chevron, star), a draggable-vertex editor, and one-click copy of the production CSS.

CSS clip-path is the modern way to give an element a non-rectangular outline without resorting to SVG masks or background images. A clipped <img> stays a real <img> — accessible, responsive, link-able, and crisp at every device pixel ratio — while looking like a hexagon, arrow, parallelogram, or talk bubble. It’s used for hero-section diagonals, avatar masks, sticky badge tags, and the angled section breaks designers love and developers used to hate.

The reason developers used to hate it: writing polygon() coordinates by hand is tedious and the syntax is unforgiving. polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%) is a pentagon — but you wouldn’t guess that from the numbers. Our CSS clip-path generator solves that with a visual editor: drag the vertices on a live preview and the CSS updates in real time. This guide covers every shape function, the gotchas with overflow and box-sizing, and the browser support story in 2026.

The 4 clip-path shape functions

Function	Syntax	Best for
`polygon()`	`polygon(x1 y1, x2 y2, ...)`	Custom shapes with corners (hexagon, arrow, talk bubble)
`circle()`	`circle(50% at 50% 50%)`	Avatar masks, circular thumbnails
`ellipse()`	`ellipse(50% 25% at 50% 50%)`	Stretched circles, oval avatars
`inset()`	`inset(10px 20px 30px 40px round 8px)`	Rounded-rect with inset edges (asymmetric)
`path()`	`path("M 0 0 L 100 50 ...")`	SVG-grade complex shapes (curves, arcs)
`shape()` (CSS Shapes 2)	`shape(from 0 0, line to 100% 0, ...)`	2026 syntax — readable polygon alternative

Coordinate system and units

Clip-path coordinates are measured from the top-left of the element. The X axis grows rightward; Y grows downward. Both axes accept percentages (relative to the element’s box) or absolute units (px, em, rem). Mixed units work: polygon(0 0, 100% 0, 100% calc(100% - 20px), 50% 100%, 0 calc(100% - 20px)) creates a banner with a 20px wave at the bottom regardless of card height.

The default reference box is the border-box (the element’s outer edge). You can change this with clip-path: polygon(...) padding-box or other box keywords — useful when you want the clip to follow the padding zone instead of the border.

How to design a clip-path with the visual editor

Open the clip-path generator
Pick a preset shape (hexagon, talk bubble, arrow, etc.) — or start from a rectangle
Drag the vertices on the live preview to fine-tune the shape
Add or remove vertices with the + / − buttons
Toggle the test image (your image or one of the demo photos) to see the clip in context
Copy the generated CSS, including the clip-path declaration and a fallback for older browsers

18 production-ready presets

The generator ships these presets so you can grab a working shape in one click:

Polygons: Triangle, Trapezoid, Parallelogram, Rhombus, Pentagon, Hexagon, Heptagon, Octagon, Nonagon, Decagon, Star
Arrows: Right Arrow, Left Arrow, Chevron Right
UI shapes: Talk Bubble, Cross / Plus, Slash Cut, Frame

Each preset is named in the dropdown — click and the editor loads the polygon coordinates. Customise from there.

Browser support and the IE legacy

clip-path with all shape functions is supported in every modern browser: Chrome 23+ (2012), Firefox 54+, Safari 7+, Edge 79+. The path() function landed slightly later (Chrome 88, Safari 13.1). The new shape() function from CSS Shapes 2 is Chrome 116+ and Safari 17.4+ — partial support in 2026, so generate polygon() as the canonical output and add shape() as a progressive enhancement only for sites with a modern audience.

Internet Explorer never supported clip-path. Microsoft retired IE in June 2022; if your analytics show under 0.5% IE traffic (typical in 2026), use clip-path without a fallback. For the rare site that still serves IE traffic (some government and Asia-region B2B), provide a rectangular fallback with a CSS feature query.

Common gotchas

Box shadows are clipped too. A box-shadow on a clipped element appears inside the clip path, not extending outward. Use filter: drop-shadow() on a wrapping element if you need the shadow to follow the clipped silhouette.
Hover events still respect the original rectangle. CSS clip-path only changes paint — the click target is still the original rectangle. To make hover follow the visible shape, use shape-outside on the element or a transparent SVG overlay.
Animating clip-path is fast. Modern browsers GPU-accelerate clip-path animations. Animating between two polygon() shapes only works when both have the same number of vertices.
Children that overflow the clip are still clipped. A child element positioned outside the clip path is invisible, even if it has position: absolute. To “break out” of the clip, the child must live outside the clipped element entirely.
SVG-style fill-rule: for self-intersecting polygons, the default rule is nonzero. Use polygon(evenodd, ...) for the alternate fill rule when you have a knot or figure-8 shape.
Mobile Safari has historical bugs. Clip-path on a transformed element used to flicker on iOS 12 and earlier — fixed in iOS 13 and now stable. If you support iOS 12, test before deploying complex animations.

When NOT to use clip-path

For complex shapes with curves and gradients (think: a logo, illustration, or character silhouette), use SVG with the actual paths inline — clip-path is for relatively simple geometric outlines on rectangular content. For animated reveal effects across many elements, CSS masking (mask-image) plus an SVG mask gives you finer control. For extracting a non-rectangular region from an image where the result is the new image, use a raster crop tool — clip-path doesn’t change the underlying file, just how the browser paints it.

Frequently asked questions

Can I animate clip-path?

Yes — modern browsers GPU-accelerate clip-path animations. Animating between two polygon() shapes works when both have the same vertex count. Different shape types (polygon to circle) need a path-conversion approach via the new shape() function or a JavaScript animation library.

Does clip-path work in all browsers in 2026?

Yes for the four core functions (polygon, circle, ellipse, inset). The path() function works in Chrome 88+ and Safari 13.1+. The new shape() function is partial — Chrome 116+ and Safari 17.4+. Generate polygon() as canonical output and use shape() as progressive enhancement.

How do I make a clipped image clickable on the visible region only?

By default the click target is the rectangular bounding box. To restrict clicks to the visible shape, use shape-outside with the same path or layer a transparent SVG with the actual path on top of the image, taking the click via the SVG.

What’s the difference between clip-path and mask-image?

clip-path uses geometric shape functions and produces hard edges; mask-image uses an image (typically PNG or SVG) and supports soft edges, gradients, and complex artwork. For a hexagon avatar, use clip-path. For a logo silhouette mask, use mask-image.

Why does my box-shadow disappear with clip-path?

Because clip-path clips the entire painted output, including shadows. The fix: wrap the clipped element in a parent and apply filter: drop-shadow() to the parent. drop-shadow follows the clipped silhouette, unlike box-shadow which uses the rectangular box.

Is my data uploaded?

No. The generator runs in your browser. The shape coordinates and the demo image you upload to test live only in your tab — they’re never sent to our servers.