How to css clip-path vs svg mask: when to use which
- Step 1Decide: do you need a soft edge? — If the cutout edge must blur, feather, or fade to transparent, you need a mask —
clip-pathedges are always hard. If a crisp straight or angular edge is fine (or desired),clip-path: polygon()is simpler and this generator produces it directly. - Step 2Decide: is the shape geometric or image-based? — Geometric outlines (triangles, hexagons, arrows, angled bands) map naturally to
polygon()points. If the shape comes from an image's alpha — a photo cutout, a brush texture, a logo with anti-aliased edges — usemask-imagewith that image, or an SVG<mask>. - Step 3For a hard geometric clip, generate the polygon — Flatten the shape to a single SVG path and run it through this generator to get
clip-path: polygon(...). Remember curves flatten to chords — keep the outline straight-edged for a faithful result. - Step 4For a soft or gradient edge, build a mask — Use
mask-image: linear-gradient(black, transparent)for a fade, ormask-image: url(shape.svg)/ an SVG<mask>with a gradient fill for a vignette. The mask's luminance or alpha drives per-pixel opacity. - Step 5Mind compositing and performance — Both
clip-pathandmaskare commonly GPU-accelerated in modern engines, but heavy masks (large raster images, big blur radii) cost more to paint than a simple polygon. Profile if a masked element janks during animation; promote it to its own layer withwill-changeonly if profiling shows a benefit. - Step 6Provide a sensible fallback — If a browser lacks support for your specific function, the element shows unclipped/unmasked. Guard with
@supports (clip-path: polygon(0 0))or@supports (mask-image: linear-gradient(#000,#000))and provide a rectangular fallback so layout never breaks.
clip-path vs mask — capability matrix
The decision usually comes down to edge softness and whether the shape is geometric or image-derived. This generator sits squarely in the clip-path / polygon column.
| Capability | clip-path: polygon() | SVG <mask> / CSS mask-image |
|---|---|---|
| Edge type | Hard, binary (in or out) | Soft possible (alpha/luminance gradient) |
| Feather / blur edge | No | Yes (gradient or blurred mask) |
| Partial transparency | No (all-or-nothing) | Yes (per-pixel opacity) |
| Source | Coordinate list (polygon points) | Image, gradient, or SVG luminance/alpha |
| Best for | Triangles, hexagons, angled bands, arrows | Vignettes, fades, photo/brush cutouts, text reveals |
| Curve support | None in polygon() (use path() or SVG <clipPath>) | Any shape the source image/SVG expresses |
| This generator produces it | Yes | No |
Which technique for which design pattern
Common UI patterns and the technique that fits best. 'Generator' means this tool can produce the value directly.
| Pattern | Recommended technique | Why |
|---|---|---|
| Angled / diagonal hero divider | clip-path: polygon() (Generator) | Straight edges, scales with percentages |
| Hexagon avatar grid | clip-path: polygon() (Generator) | Six straight vertices, hard edge wanted |
| Photo fading to transparent at the bottom | mask-image: linear-gradient | Needs a soft alpha falloff |
| Spotlight / vignette over a banner | SVG <mask> with radial gradient | Per-pixel opacity, soft circle |
| Text-shaped image reveal | mask-image with text-as-SVG | Anti-aliased glyph edges via alpha |
| Rounded card corners | border-radius (neither) | polygon() cannot round; mask is overkill |
Cookbook
Side-by-side snippets showing where each technique wins. The generator covers the polygon column; the mask snippets are hand-written.
Hard angled edge — clip-path wins
An angled section divider is straight-edged, so clip-path: polygon() is the right call. Generate it from a triangle/trapezoid SVG with this tool.
/* hard diagonal — generated polygon */
.section {
clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
}
/* edge is crisp; no blur is possible or wanted */Soft bottom fade — mask wins
A photo that should dissolve into the page background needs a per-pixel alpha falloff. clip-path cannot do this; a one-line gradient mask can.
/* soft fade — NOT a clip-path job */
.photo {
mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}Vignette spotlight — SVG mask
A soft circular spotlight uses an SVG <mask> with a radial gradient fill. The white centre is fully visible, the dark edge fades out.
<svg width="0" height="0">
<mask id="spot">
<radialGradient id="g"><stop offset="60%" stop-color="#fff"/><stop offset="100%" stop-color="#000"/></radialGradient>
<rect width="100%" height="100%" fill="url(#g)"/>
</mask>
</svg>
.banner { mask: url(#spot); }Hexagon avatar — clip-path wins
A hexagon is six straight vertices with a hard edge — ideal for polygon(). Generate it from a hexagon SVG path.
/* generated from a hexagon path */
.avatar {
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}When you tried to fake softness with clip-path
A common anti-pattern: stacking blurred copies to fake a feathered clip edge. Replace it with a single mask.
/* anti-pattern: blurred clones to fake a soft edge */
.el, .el::after { clip-path: polygon(...); filter: blur(8px); }
/* do this instead */
.el { mask-image: radial-gradient(circle, black 60%, transparent 100%); }Edge cases and what actually happens
Trying to get a soft edge from clip-path
Not possibleclip-path is binary — there is no feather, blur, or opacity falloff on its edge. Any attempt to soften it (stacked blurred pseudo-elements, box-shadow tricks) is a workaround for using the wrong technique. Switch to mask-image or an SVG <mask> with a gradient.
Using a mask where a polygon would do
OverkillFor a crisp straight-edged cut, a raster or SVG mask is heavier than a polygon() and can blur the edge slightly due to anti-aliasing of the mask source. If the shape is geometric and the edge should be hard, generate a polygon() instead.
This generator asked to produce a mask
Out of scopeThe tool outputs clip-path: polygon() only. It has no mask mode and cannot emit mask-image or an SVG <mask>. For soft-edged effects, write the mask by hand or start from a gradient/image source — the polygon path has no alpha channel to work with.
mask-image needs the -webkit- prefix
Prefix requiredSome WebKit/Blink versions still need -webkit-mask-image alongside the unprefixed mask-image. Omitting it can leave the mask inactive on certain Safari/older Chrome builds. Always declare both. clip-path no longer needs the -webkit- prefix in current evergreen browsers.
Luminance vs alpha mask confusion
Common pitfallSVG <mask> defaults to luminance masking (white = visible, black = hidden), while CSS mask-image with an image uses the image's alpha by default. Feeding a transparent PNG into an SVG luminance mask, or a black/white SVG into an alpha context, produces a fully-hidden or fully-visible element. Match the mask type to the source.
Animating a heavy mask
Performance watchAnimating a large raster mask or a big blur radius can force repaints each frame. A polygon() clip animates more cheaply because there is no source bitmap to re-sample. If a masked element janks, reduce the mask resolution/blur or switch to a polygon if the design allows.
Self-intersecting polygon clip
Fill-rule quirkEven a hard polygon() can surprise you: a self-crossing point list creates holes via the even-odd/nonzero fill rule. This is inherent to polygon geometry, not a masking issue. Keep the outline simple and non-crossing — see the generator's edge-case notes.
Need both a shape and softness
Combine techniquesYou can layer them: clip the element to a hard polygon, then apply a gradient mask for a fade within that shape. Order matters — both apply to the element's rendered output. Test in target browsers, as combined clip+mask can be expensive.
Frequently asked questions
What is the fundamental difference between clip-path and mask?
clip-path is binary: each pixel is either fully kept or fully removed, with a hard edge. A mask is per-pixel: it multiplies the element's opacity by the mask's alpha or luminance, so edges can fade, blur, or be partially transparent. Use clip-path for hard geometric shapes, masks for soft or image-driven cutouts.
Can clip-path produce a soft, feathered edge?
No. There is no clip-path syntax for softness in any browser. If you need a feathered, blurred, or gradient edge, you must use masking. clip-path edges are always crisp.
Does this generator make masks?
No. It only outputs clip-path: polygon(). For masks you write mask-image (CSS) or an SVG <mask> by hand, driven by a gradient or image. The polygon value has no alpha information.
Is clip-path faster than mask?
Often, for simple shapes, because a polygon has no source bitmap to sample. But both are GPU-accelerated in modern engines, and a small mask can be perfectly fast. The real cost in masks comes from large raster sources and big blur radii — profile rather than assume.
When should I use an SVG <clipPath> instead of CSS clip-path: polygon()?
When the shape needs curves. CSS polygon() only has straight edges. An inline SVG <clipPath> can contain real Bezier paths and you reference it with clip-path: url(#id). This generator outputs polygon() only, so curved clips belong in an SVG <clipPath>.
Why does my mask need -webkit-mask-image?
Some Safari and older Chromium versions only recognise the prefixed property. Declare both mask-image and -webkit-mask-image (and the related mask/-webkit-mask shorthands) so the mask renders everywhere it can.
Can I combine a clip-path and a mask on the same element?
Yes. They are independent properties and both apply to the element's rendered box — for example, a hard polygon clip plus a gradient mask for an internal fade. Combining them is more expensive, so test performance on the elements you animate.
What is luminance vs alpha masking?
Luminance masking (the SVG <mask> default) uses brightness: white shows, black hides. Alpha masking (CSS mask-image with an image, by default) uses the source's alpha channel. Pick the mode that matches your source, or you will get an all-visible or all-hidden element.
Can I reuse a polygon value for shape-outside?
Yes. The polygon(...) string this generator produces is also valid for shape-outside on a floated element, letting text wrap around the same shape. That is a clip-path/geometry feature, not a mask one.
Which technique handles a photo cutout with anti-aliased edges?
Masking. A photo cutout's edge is anti-aliased (semi-transparent pixels), which is exactly what an alpha mask preserves. A polygon clip would replace the soft edge with a hard straight line and lose the cutout's fidelity.
Do clip-path and mask both clip overflow and pointer events?
Both visually remove the clipped/masked area, but pointer-event behaviour can differ by browser — clipped-away regions of a clip-path generally do not receive pointer events, while masked regions historically still could in some engines. Test interaction if the cut-away area sits over clickable content.
Which JAD tools help with each technique?
For hard polygon clips, use this generator. For decorative SVG shapes you might mask or layer, see the Blob Generator and Wave/Section Divider. To slim a curve-heavy path before any conversion, use the Path Simplifier.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.