Gradient Fade With CSS

Fade out content using CSS in a way that works with any background.

Background

A simple way to do a fade-out effect is to overlay a gradient matching the background on top of the content you want to fade. Using a mask will allow you to fade without impacting the current background. For example, if you want to have a Star Wars intro effect, with the text fading out as it gets farther away, simply overlaying a gradient will also dim the star field behind the text.

mask-image

The mask-image has property lets us specify an image that will determine what portions of an element will be visible. This can be something like an image, an SVG or even a gradient. Where a solid color will completely cut a part off, opacity will cause the content to be faded instead. The MDN page shows an example using a SVG to show only a part of a <div>.

A linear gradient

First, lets take a look at a using a simple linear gradient to fade out some text.

.linear-fade {
  mask-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0) 0em,
    rgba(0, 0, 0, 1) 3.75em);
-webkit-mask-image: …; linear-gradient( to top, rgba(0, 0, 0, 0) 0em, rgba(0, 0, 0, 1) 3.75em);
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Text faded-out using a simple linear gradient.

Note that at the bottom we have an `opacity` of `1`. This causes the content at the bottom to be completely transparent. In contrast, at the top of the gradient (at `0px` or `60px` from the bottom), we have an opacity of `0`, which means the content is completely unaffected.

A better gradient?

The linear gradient might feel a little too gradual. Something that drops off more quickly can look more natural. For example, compare the following set of gradients to the simple linear one below by toggling the checkbox.

.curved-fade {
  mask-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0) 0em,
    rgba(0, 0, 0, 0.125) 0.5em,
    rgba(0, 0, 0, 0.25) 1.5em,
    rgba(0, 0, 0, 0.5) 2em,
    rgba(0, 0, 0, 1.0) 2.5em);
-webkit-mask-image: …; linear-gradient( to top, rgba(0, 0, 0, 0) 0em, rgba(0, 0, 0, 0.125) 0.5em, rgba(0, 0, 0, 0.25) 1.5em, rgba(0, 0, 0, 0.5) 2em, rgba(0, 0, 0, 1.0) 2.5em); );
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Text faded-out on a curve, approximated using five separate linear gradients.

With the more aggresive fade-out, we can avoid fading out the third line, keeping the original color contrast with the background. At the same time, we still have the last two lines mostly faded out.

Fading the Last Line's end

Using two linear gradients, we can fade out the right part of the last line. The first gradient below is used to show everything but the last line. The second gradient does a fade starting from the right. As background-image, this looks like:

Show everything but last line
Fade left to right
Combining the above
Visualizing how to create the mask by combining two linear gradients.

Since we are dealing with text in this example, it makes sense to use text relative units for our gradient. For cutting off the last line, the example below uses the line-height for the example text of 1.25em. For the right to left fade, a unit based on the expected character width, ch, is used.

.end-fade {
  mask-image:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0) 1.25em,
      rgb(0, 0, 0) 1.25em
    ),
    linear-gradient(
      to left,
      rgba(0, 0, 0, 0) 0ch,
      rgb(0, 0, 0) 10ch
    );  
-webkit-mask-image: …; linear-gradient( to top, rgba(0, 0, 0, 0) 1.25em, rgb(0, 0, 0) 1.25em ), linear-gradient( to left, rgba(0, 0, 0, 0) 0ch, rgb(0, 0, 0) 10ch );
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Conclusion

Using the CSS mask-image, you can create a fade out effect that works on top of any sort of background, including images. While this is quite useful for text, you can apply this to any sort of HTML content.