HTML & CSS

Fade an Image Edge with a CSS Linear Gradient Mask

Fade an image into its backdrop with a CSS linear-gradient mask. Keep the image intact, control the opaque region, and distinguish a mask from an overlay.

By Uddhav Gopani, FounderPublished 27 September 2026Updated 29 September 2026

Choose a mask when the image should become transparent

A linear gradient can either paint color over an image or control how much of the image remains visible. For a fade into the surrounding page, use a gradient as mask-image. The mask changes the image’s visible alpha, allowing the real surface underneath to show through. It does not permanently edit the source file.

If your goal is merely to darken a photograph behind text, use a transparent gradient overlay instead. An overlay adds a painted layer; a mask removes visibility from the masked element. They can look similar over one solid background but behave differently when the surrounding surface changes.

Keep the upper image opaque and fade the lower edge

This example displays a decorative image with a vertical fade. It stays fully visible through sixty percent of its displayed height, then gradually disappears by the bottom. The image is decorative here, so the empty alt attribute is intentional; substitute meaningful alternative text if your chosen image contributes content.

<div class="image-fade-surface">
  <img class="image-fade" src="/images/ridge.jpg"
       width="1200" height="800" alt="">
  <p>The image fades into the surface underneath.</p>
</div>

.image-fade-surface {
  max-width: 48rem;
  margin: 1rem auto;
  color: #172554;
  background: #e0f2fe;
}
.image-fade {
  display: block;
  width: 100%;
  height: auto;
  mask-image: linear-gradient(to bottom, #000000 60%, transparent 100%);
  mask-mode: alpha;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}
.image-fade-surface p { margin: 0; padding: 1rem; }

The black part of this alpha mask is opaque, so it reveals the image rather than painting black onto it. The transparent endpoint hides the image and exposes the pale-blue parent. Setting mask-mode: alpha makes that interpretation explicit; do not confuse it with a luminance mask where color brightness also affects visibility.

Move the start of the fade deliberately

Change the sixty-percent stop to thirty percent to start fading earlier. The fade then spans more of the displayed image and hides more of its lower content. Change it to eighty percent for a shorter transition near the bottom. Keep the final transparent stop at one hundred percent when the bottom should disappear completely.

For a horizontal fade, change to bottom to to right. The percentages now refer to the gradient’s horizontal progression across the image. Check the subject position before choosing that direction; fading out a face, annotation or product detail can remove the very information the image was meant to communicate.

Verify that it reveals the actual backdrop

Change the parent’s background from pale blue to white and inspect the lower edge again. It should blend into white without editing the mask colors. That behavior distinguishes a transparency mask from an overlay hard-coded to a pale-blue color. The image file and its intrinsic dimensions remain unchanged in both tests.

Keep the paragraph outside the masked image. Applying the mask to the entire wrapper would also fade its text and other descendants. When a layout needs both an image fade and an overlapping caption, treat their stacking and masking scopes separately so the caption is not unintentionally hidden.

Review support and the image’s meaning

MDN’s mask-image reference explains the mask source and browser support. In an environment that ignores this declaration, the unmasked image is the fallback. Ensure that the full image remains acceptable rather than relying on the fade to conceal sensitive or unwanted pixels.

A CSS mask is a visual effect, not redaction. The original image remains downloadable and can be inspected without the stylesheet. If content must be removed from a distributable image, create a properly edited source asset instead of covering or masking it in the page.

The W3C decorative-image guidance helps determine whether empty alternative text is appropriate. A fade does not change an informative picture into decoration. Preserve an accurate text alternative when the image communicates a scene, result or relationship that the surrounding text does not already supply.

Use the gradient value, then write the mask rule

The CSS Gradient Generator exports background declarations with two opaque colors. It does not export masks or alpha stops. You can use its direction preview as a starting point, but the transparent stop and mask properties in this recipe must be written manually.

Test both an image that loads and one whose request fails. Inspect the actual image element’s dimensions, not only the parent, when diagnosing a missing effect. Finish at phone width and with the surrounding surface changed, so the fade is verified as real transparency rather than an accidental match to one screenshot’s background.