You will use a CSS gradient as a mask to fade an element’s edges smoothly instead of hiding it with a solid overlay.
What it is
A CSS mask is a stencil that controls which parts of an element are visible. When the stencil is a gradient, the gradient’s alpha values create a smooth fade: fully opaque areas show the element, fully transparent areas hide it. In an alpha mask, the color itself is less important than its transparency, so black is often used as a convenient opaque value and transparent as the hidden value. Related terms include mask-image, mask-size, mask-repeat, and mask-mode.
Why it matters
- Fade images or cards into a page background without adding a colored overlay.
- Create soft vignettes and edge reveals that look more natural than hard cuts.
- Reveal text or UI elements gradually by animating
mask-positionor gradient stops. - Keep markup simple by applying the effect directly to the element.
Syntax or steps
The smallest useful pattern is a linear gradient assigned to mask-image:
.fade {
-webkit-mask-image: linear-gradient(to bottom, black 60%, transparent);
mask-image: linear-gradient(to bottom, black 60%, transparent);
}
Choose a direction, place an opaque color where content should remain visible, and place transparent where it should fade out. Add mask-size: 100% 100% and mask-repeat: no-repeat if the gradient does not cover the element as expected.
Example
<div class="fade">
<h2>Mountain Lake</h2>
<p>A calm alpine scene.</p>
</div>
.fade {
width: min(420px, 100%);
height: 260px;
padding: 1rem;
background: #1e3a8a;
color: #fff;
-webkit-mask-image: linear-gradient(to bottom, black 55%, transparent);
mask-image: linear-gradient(to bottom, black 55%, transparent);
mask-size: 100% 100%;
mask-repeat: no-repeat;
}
The panel fades toward the bottom. The stop black 55% keeps the upper part fully visible, while transparent hides the lower edge. mask-size makes the gradient cover the whole panel, and mask-repeat prevents tiling.
Common mistakes
- Applying the mask to a parent and forgetting that it can hide child elements too.
- Using the
maskshorthand and losing other mask settings; if that happens, setmask-sizeandmask-repeatexplicitly. - Expecting luminance behavior. With the default alpha mask, transparency controls visibility; with
mask-mode: luminance, brightness controls visibility. - Choosing the wrong gradient direction, which fades the opposite edge.
When to use it
| Technique | Effect | Use when |
|---|---|---|
mask-image with gradient | Soft, pixel-level fade | You need smooth edges or animated reveals |
opacity | Uniform transparency | The whole element should fade equally |
clip-path | Hard shape cut | You need a crisp boundary, not a fade |
| Gradient overlay | Color tint over content | You want to darken or lighten, not hide pixels |
Practice
Guided exercise: Fade the right edge of an image using linear-gradient(to right, black 70%, transparent). Expected result: the left side stays visible and the right side fades out.
Challenge: Create a soft vignette that fades all four edges. Hint: use radial-gradient(circle at center, black 60%, transparent) as the mask image.
Quick check
Question: In a default CSS alpha mask, what does transparent do?
Answer: It sets the mask alpha to zero, hiding that part of the element.
Summary
Gradient masks turn transparency into a reusable visual tool: opaque areas show content, transparent areas hide it. They are ideal for soft fades, edge reveals, and vignettes when uniform opacity or hard clipping is not enough.