Abe Fehr Abe Fehr - 1 month ago 9
CSS Question

Fade bottom or top of text in a div

I'd like to create a list with a particular size, but it's contents can be larger than the list.

I thought it would be real nice looking if the list had items in it and they faded out at the bottom and the top, while having a background image for the container that also contains the list. This is proving harder than expected, and I'm having a difficult time finding an appropriate guide for such a thing.

The images below shows the expected result

enter image description here

Is this even possible? Thanks in advance.


  • I've looked at this and this, but I can't use those techniques because there's a background image in the background, not a solid color


I was able to get an ugly prototype together. This only works with -webkit- browsers (Chrome, Safari, etc), but it might point you in the right direction and help you adapt to get it cross browser compatible.

.con{background:#0f0; color:#fff;}
ul{margin:0; padding:0; list-style:none; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom,  from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));}
<div class="con">