Why use a gradient mask instead of an image with a built-in fade?

A CSS gradient mask is resolution-independent, requires no image asset, works on any background (including a live video or gradient), and can be changed instantly by editing the gradient stops — no image re-export required. It's the more maintainable choice whenever the fade is a design decision rather than baked into photographic content.

generatorsBeginner-Intermediate · 2026

CSS clip-path and mask: Cutting and Revealing Shapes Without Images (2026)

Q: What is the difference between clip-path and mask in CSS?

clip-path cuts an element to a hard-edged shape — anything outside the path is completely invisible, with no partial transparency. mask uses the luminance or alpha values of an image or gradient to control opacity per pixel, so it supports soft edges, gradients, and fades that clip-path cannot produce.

Q: How do you make a CSS triangle with clip-path?

Set a clip-path: polygon() with three coordinate pairs, e.g. polygon(50% 0%, 0% 100%, 100% 100%) for a triangle pointing up. This is more flexible than the classic zero-width, colored-border trick — it works on elements with real content, background images, and padding, none of which the border trick supports.

Q: Can you animate clip-path?

Yes, but only between clip-path values that use the same function with the same number of points — e.g. two polygon() values with an equal number of coordinate pairs, or two circle() values. The browser interpolates each point independently. Animating between different functions (circle() to polygon()) or polygon()s with different point counts does not animate smoothly.

Q: Do clip-path and mask have good browser support?

clip-path has excellent support across all modern browsers. mask-image has strong support too, though it historically required the -webkit- prefix in Safari and some Chromium versions — pairing -webkit-mask-image with the unprefixed mask-image covers the practical browser matrix in 2026.

Q: Is there a free clip-path and mask generator?

Yes. CSSAWWWARDS has a CSS Clip Path Generator with 14 shape presets, a CSS Mask Generator for gradient fade effects, and a CSS Triangle Generator covering both the border trick and the modern clip-path approach. All free, no signup.

Two CSS properties reshape elements without a single image export: clip-path cuts a hard edge, mask paints a soft one. Knowing which does which turns “I'd need to design this in Figma and export a PNG” into a five-line stylesheet change.

By Adil Badshah11 August 202610 min read

CSS clip-path and mask: Cutting and Revealing Shapes Without Images (2026)

clip-path vs. mask: What's the Difference?

Quick Answer

clip-path cuts an element to a hard-edged shape — everything outside the path is fully invisible, nothing partially transparent. mask uses the luminance or alpha of an image or gradient to control opacity pixel by pixel, so it supports soft edges and fades that clip-path simply cannot produce.

Both properties reshape what's visible without touching the element's actual box or triggering a reflow of surrounding content — that part they have in common. Where they diverge is at the edge: a clip-path boundary is binary, either fully shown or fully hidden, which is exactly right for a badge shape, a diagonal section divider, or a triangle. A mask boundary can be a gradient, which is exactly right for a photo that needs to fade to transparent at one edge, or a spotlight-style reveal.

clip-path: Hard-Edged Shape Cutting

Quick Answer

clip-path accepts basic shape functions — circle(), ellipse(), polygon(), and inset() — each defining a region; anything outside it is clipped away entirely. polygon() is the most flexible, taking any number of coordinate pairs to define an arbitrary straight-edged shape.

/* circle(radius at center-x center-y) */.avatar {  clip-path: circle(50%);} /* polygon(x1 y1, x2 y2, x3 y3, ...) — any number of points */.badge {  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);} /* inset(top right bottom left round radius) — a rounded rectangle cut */.notch-card {  clip-path: inset(0 0 0 0 round 12px);}

circle() and ellipse() cover the common cases — a circular avatar crop, an oval spotlight. inset() is useful for rounded-rectangle crops with per-corner control. polygon() is where clip-path becomes a genuine shape design tool: badges, chevrons, angled section dividers, and arrows are all just a list of coordinate pairs away — the CSS Clip Path Generatorhas 14 of these shapes ready as drag-and-adjust presets if you'd rather skip writing the coordinates by hand.

CSS Triangles: A clip-path Special Case

Quick Answer

The classic CSS triangle trick uses a zero-width element with colored, transparent borders. clip-path: polygon() with three points does the same job on a real element — one that can still have content, padding, and a background image, none of which the border trick supports.

The border-trick triangle predates clip-pathby well over a decade, and it's still common in older codebases and tutorials. It works by collapsing an element to zero width and height, then using its (normally invisible) border box as the only visible paint — three of the four border colors set to transparent, the fourth carrying the triangle's color.

/* The classic border trick — zero-width element,   colored borders form the triangle */.triangle-old {  width: 0;  height: 0;  border-left: 40px solid transparent;  border-right: 40px solid transparent;  border-bottom: 60px solid #1D9E75;  /* No content, no background-image, no padding —     this element can only ever be a flat-colored triangle */}

The clip-path version achieves the same visual result on an actual sized element, which means it can carry a background image or gradient, real content, and padding — none of which is possible on the zero-size border-trick element.

/* clip-path — a real element with a triangular shape */.triangle-new {  width: 80px;  height: 60px;  background: #1D9E75; /* or a gradient, or a background-image */  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);}

The CSS Triangle Generator builds both versions side by side — border trick and clip-path — so you can pick size, direction, and color without writing either by hand.

mask: Soft-Edged Gradient Reveals

Quick Answer

mask-imageaccepts a gradient (or an image) and uses its luminance to control the element's opacity per pixel — black areas hide, white areas show, and anything in between is partially transparent. This is how to fade content to transparent at an edge without exporting an image.

The most common real-world use is a “read more” fade at the bottom of a truncated block, or a photo that needs to dissolve into the page background at one edge — both traditionally done with a semi-transparent PNG overlay, both achievable with a single gradient declaration instead.

/* Fade an image or block of content to transparent at the bottom —   the classic "read more" gradient overlay, without an image file */.fade-bottom {  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);} /* Radial mask — vignette / spotlight reveal */.spotlight {  mask-image: radial-gradient(circle at center, black 40%, transparent 75%);  -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 75%);}

Always pair the prefixed and unprefixed versions. Safari (and some Chromium versions) require -webkit-mask-image alongside the standard mask-image — both declarations should carry the identical gradient value, which is exactly what the CSS Mask Generator outputs automatically for any fade direction, size, or softness you set.

Animating clip-path

Quick Answer

clip-path can be transitioned or animated, but only between values using the same shape function with the same number of points — two polygon()s with an equal point count, or two circle()s. The browser interpolates each point independently; mismatched functions or point counts don't animate smoothly.

This constraint is the reason a lot of “reveal” animations use a rectangular polygon() that starts collapsed to a line and expands to the full box — every state in between is still a valid four-point polygon, so the browser can interpolate cleanly.

/* Animating clip-path — both states must use the same   function with the same number of points */.reveal-panel {  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);  transition: clip-path 0.4s ease;} .reveal-panel.open {  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}

mask, by contrast, doesn't offer the same clean point-based animation model — animating a gradient's stops works, but there's no equivalent to interpolating between two arbitrary polygon shapes. For shape-morphing animations specifically, clip-path is the property built for the job.

Browser Support

Quick Answer

clip-path has excellent support across all modern browsers with no prefix required. mask-image has strong support too, but historically needed the -webkit- prefix in Safari and some Chromium versions — shipping both the prefixed and unprefixed declaration together covers the practical browser matrix in 2026.

Neither property requires a JavaScript polyfill or feature-query fallback for mainstream production use today. The one practical checklist item is remembering the -webkit-mask-image pairing for mask — a detail easy to forget since clip-pathdoesn't need it.

Frequently Asked Questions

What is the difference between clip-path and mask in CSS?

clip-path cuts a hard-edged shape — fully visible or fully hidden. mask uses luminance/alpha for per-pixel opacity, supporting soft edges and gradient fades.

How do you make a CSS triangle with clip-path?

clip-path: polygon(50% 0%, 0% 100%, 100% 100%) for a triangle pointing up. Unlike the border trick, this works on an element that still has real content and a background.

Can you animate clip-path?

Yes, between values using the same function with the same number of points — e.g. two polygon()s with matching point counts. Mismatched shapes don't interpolate smoothly.

Why use a gradient mask instead of a pre-faded image?

A CSS gradient mask is resolution-independent, needs no image export, works on any background including live content, and can be edited instantly by changing gradient stops.

Do clip-path and mask have good browser support?

clip-path — excellent, no prefix. mask-image — strong, but pair it with -webkit-mask-image for full Safari/Chromium coverage.

Is there a free clip-path and mask generator?

Yes — CSSAWWWARDS has a Clip Path Generator, a Mask Generator, and a Triangle Generator. All free, no signup.

Share on X LinkedIn