CSS Mask Generator
What mask-image does
A mask hides parts of an element according to the alpha channel of another image. Opaque pixels of the mask show the element, transparent pixels hide it, and everything between fades — which is why a simple linear gradient is all you need for a soft fade-out edge.
Syntax
mask-image: <image>; mask-size: <size>; mask-repeat: <repeat>;| Part | What it controls |
|---|---|
| mask-image | Usually a gradient, sometimes an SVG or PNG. Only its alpha matters, so the colours in the gradient are irrelevant — only how opaque they are. |
| black to transparent | A linear-gradient(to bottom, #000, transparent) fades the element out downward. Swap the stops to fade it in. |
| mask-size / mask-repeat | Behave like background-size and background-repeat, so a small mask can be tiled into a repeating cut-out. |
| multiple masks | Comma-separated masks combine, letting you fade two edges at once with two gradients. |
| mask-composite | Controls how stacked masks combine: add, subtract, intersect or exclude. |
| -webkit- prefix | Safari still needs -webkit-mask-image alongside the unprefixed property. The generator writes both. |
Notes from practice
Only alpha counts
A gradient from red to blue masks nothing, because both ends are fully opaque. The gradient has to run to transparent to reveal anything.
Masks beat overlay gradients
A fade built from an overlay only works when you know the background colour behind it. A mask makes the element itself transparent, so it fades correctly over a photo, a pattern or anything else.
Mask versus clip-path
clip-path cuts a hard geometric edge; a mask can fade. If the edge is soft, you want a mask.
CSS Mask Generator FAQ
How do I fade out the bottom of an image in CSS?
Mask it with a gradient that runs to transparent: mask-image: linear-gradient(to bottom, #000 60%, transparent). Add the -webkit-mask-image version alongside it for Safari. Unlike an overlay, this works over any background.
What is the difference between mask and clip-path?
clip-path cuts along a hard geometric edge — each pixel is either visible or not. A mask uses the alpha channel of an image or gradient, so it can fade gradually. Use clip-path for shapes and masks for soft edges.
Why is my CSS mask not working in Safari?
Safari still requires the -webkit- prefix for the mask shorthand and mask-image. Write both the prefixed and unprefixed declarations; this generator includes the prefix in its output.
Do mask gradient colours matter?
No, only their alpha. black to transparent and red to transparent produce exactly the same mask. What matters is where the gradient becomes see-through, because that is where the element disappears.
How do I fade two edges of an element at once?
Use two comma-separated masks, or a single gradient with four stops: mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent). The second form is usually simpler for symmetrical fades.
Related generators
- Clip Path — Cut an element into polygons, circles, ellipses or rounded insets.
- Gradients — Linear, radial and conic gradients, repeating patterns and modern colour-space interpolation.
- Filter — Combine blur, colour adjustments and drop-shadow on any element. Defaults are left out of the output.
- Blend Modes — Blend stacked backgrounds with background-blend-mode, or blend an element into what is behind it with mix-blend-mode.
Part of CSSGen.dev — 30 free visual CSS generators with browser support built in.