Using CSS, can you apply a gradient mask to fade to the background over text?

Question

I have a full screen fixed background image. I would like the text in my scrolling div to fade out at the top, presumably by applying a gradient mask to the background at on

Answer 1

I've been wondering this exact same thing. The solution is actually quite simple. Although this is of course quite a modern feature, so you're stuck to browser compatibility.

Webkit can take care of this with a single line of CSS:

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

(The new standardised way of doing it is would use mask-image and linear-gradient using its new syntax. See caniuse.com for mask-image and linear-gradient.)

This would fade out the bottom 10% of whatever element it's applied to, without using even so much as an image. You could add padding-bottom: 50% to make sure that content is only faded when there is more to scroll to.

Source: http://www.webkit.org/blog/181/css-masks/

A Mozilla (Gecko) fallback is a bit trickier though: you can use its 'mask' feature, but this demands a SVG-image. You could try to base64 embed that image into your stylesheet... Use mask-image in Firefox now.