13

I would like to know if it would be possible to replicate the effect like the bottom of the Top Tweets list with pure CSS?

http://www.twitter.com

derekerdmann
  • 17,696
  • 11
  • 76
  • 110
Rana
  • 4,431
  • 9
  • 32
  • 39

4 Answers4

25

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.

Zungy
  • 13
  • 9
derekerdmann
  • 17,696
  • 11
  • 76
  • 110
  • 1
    You can get it working in older IEs as well via `filter` (IE7 and earlier) and `-ms-filter` (IE 8 & 9). See http://stackoverflow.com/questions/213750/gradient-colors-in-internet-explorer and http://stackoverflow.com/questions/5159136/can-you-use-rgba-colours-in-gradients-produced-with-internet-explorers-filter-pr – Paul D. Waite Mar 06 '11 at 16:55
  • 3
    This only works if the background of this object is white, or static. Imagine that behind this element is a gradient or an image. – JLF May 06 '15 at 19:26
3

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.

Valer
  • 844
  • 1
  • 7
  • 17
2

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%),
    );
}

Gradient image

Caveman
  • 2,527
  • 1
  • 17
  • 18
0

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));
JazzBrotha
  • 1,628
  • 11
  • 15