How Can I Fade Text into a Background Image Using CSS Gradients?

Applying Gradient Masks to Fade Text into Background

Web designers often encounter the challenge of creating text that visually blends with a fixed background image. One effective solution is to apply a gradient mask that fades the text toward the background at the top of the scrolling div.

To achieve this effect, Webkit browsers offer a straightforward CSS solution:

-webkit-mask-image: -webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))

This line of code fades out the bottom 10% of an element without relying on images. To ensure that content is only faded when there is more to scroll, consider adding padding-bottom: 50%.

In browsers that support CSS masks, such as Firefox and modern versions of Microsoft Edge, the following syntax is preferred:

mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);

This code creates a vertical gradient mask that fades out the bottom portion of the element, revealing the background image.

The above is the detailed content of How Can I Fade Text into a Background Image Using CSS Gradients?. For more information, please follow other related articles on the PHP Chinese website!