Question

How can I create an effect similar to this in CSS (box on the right)?

Small question, but short is sweet. I’d post code I’ve tried, but I can’t get a start on fading the entire box, which would also suffice for my purposes (I can add another div with the background underneath, all I need is to fade the text).

Answer 1

You can use image masks. This however is only available for pretty much Chrome. More info.

element {
    -webkit-mask-image: -webkit-gradient(
        linear, 
        0 0, 
        0 50%, 
        from(rgba(0, 0, 0, 0)), 
        to(rgba(0, 0, 0, 1))
    )
}

JSFiddle