html - Fade text near end of div?

Question

Is it possible to fade the text horizontally near the end of the div using the CSS.

For example like this:

Answer 1

CSS gradients and rgba will do the job for this

Demo

Extended Text Version (Updated)

div {
    position: relative;
    display: inline-block;
}

div span {
    display: block;
    position: absolute;
    height: 80px;
    width: 200px;    
    right: 0;
    background: linear-gradient(to right, rgba(255,255,255,.6) 30%,rgba(255,255,255,1) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,.6)), color-stop(100%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(left, rgba(255,255,255,.6) 30%,rgba(255,255,255,1) 100%);
    top: 0;

}

Note: I've stripped off cross-browser CSS gradient code, you can get it from http://www.colorzilla.com/gradient-editor/

About the rgba() it's introduced recently in CSS3 spec, where I hope you know what RGB stands for and a stands for alpha, so instead of using HEX I am using RGBA and am just playing with the alpha part here

Answer 2

Skipping IE9-, which may require an image or SVG, you can add a position: absolute div that covers the full width and has a partially-transparent gradient that fades to white. This div must be contained by the element you want to cover, which must be position: relative.

http://jsfiddle.net/JcPAT/

Answer 3

Not really cross browser friendly but you can use something like:

-webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.65) 20%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(left, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.65) 20%, rgba(0,0,0,0) 100%);