Patrick Patrick - 2 years ago 134
CSS Question

Fade out text on image

I know how to fade out a text on a plain colored background with a CSS transparent gradient.
But how is it possible to fade out a text on an image background?
Here is an example of what I'd like:

Fade out text on image

NB: I need a static effect just like the image (not a dynamic transition).

Answer Source

CSS mask-image is probably what you are looking for:

div {
  background: url("https://placeimg.com/630/400/any/grayscale");
  padding: 1em;
}

p {
  color: white;
  font-weight: bold;
  -webkit-mask-image: linear-gradient(to bottom, white, transparent);
  mask-image: linear-gradient(to bottom, white, transparent);
}
<div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget eros quis purus laoreet lobortis sit amet sit amet diam. Maecenas imperdiet nunc sed erat placerat, id ullamcorper mauris rhoncus. Phasellus non fringilla urna, eget elementum nulla.
  </p>
</div>

Be sure to check browser compatibility (not so great, unfortunately)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download