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

Applying a Gradient Mask to Fade Text over Background

Would you like your text to smoothly transition into the background as users scroll? If so, applying a gradient mask to the backdrop at the top of your scrolling div might be the solution you need.

Solution:

Fortunately, Webkit offers a convenient CSS option for this:

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

This code creates a gradient fading from opaque (at the top) to transparent (10% from the bottom) for the element. To ensure content is only faded when scrolling, add padding-bottom: 50%.

Mozilla (Gecko) Fallback:

Originally, Firefox required a SVG mask image, but now supports mask-image.

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