Gradient alpha fade out effect with CSS 3

I would like to know if it would be possible to replicate the effect like the bottom of the To开发者_开发技巧p Tweets list with pure CSS?

http://www.twitter.com

Yes you can! Taking advantage of RGBa colors and CSS3 gradients, we can apply the following styles to an element and have a fading semi-transparent background:

Mozilla:

background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255, 1));

Webkit:

background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255, 1));

(Updated after changes to Webkit gradients)

Sadly, this only works in Firefox 3.6+, Safari, and Chrome. If you need the effect in IE or older versions of Firefox, then you'd be better off using the semi-transparent PNG like Twitter does.

Although this is not an all-around sollution, it works on Safari/Webkit - so it's nice to know for someone who does mobile apps.

So, suppose you only address webkit, you've got this nice feature described here.

-webkit-mask-image: -webkit-gradient(...)

This also helps you when you can't fake the fade-out with some overlaid element. (for example, having an image on the background, instead of a solid color)

For the rest, go with the above.

In my case I thought that a linear gradient was ugly so I created an 'ease' gradient. Mix and match with the rest of the answers to get your desired result.

.your-class {
    --scale: 1;
    mask-image: linear-gradient(90deg,
      rgba(255,255,255,0.0) calc(var(--scale) * 0%),
      rgba(255,255,255,0.1) calc(var(--scale) * 6%),
      rgba(255,255,255,0.5) calc(var(--scale) * 22.5%),
      rgba(255,255,255,0.6) calc(var(--scale) * 25.5%),
      rgba(255,255,255,0.7) calc(var(--scale) * 30%),
      rgba(255,255,255,0.8) calc(var(--scale) * 36%),
      rgba(255,255,255,0.9) calc(var(--scale) * 48%),
      rgba(255,255,255,1.0) calc(var(--scale) * 60%),
    );
}

If you want to use more up to date direction syntax for the gradient use to bottom, as in

background: -webkit-linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255, 1));