Question

the text fade should appear with solid text on the left and faded text on the right. in this example i made how would you fade jupiter to look like earth and mars using only css?

.hello-jupiter {
    display:inline-block;
    background: rgba(215, 215, 215, 1);
    color:white;
    box-shadow: inset 0px 10px 15px -10px rgba(50, 50, 50, .5), inset 0px -10px 25px -10px rgba(50, 50, 50, .75);
}

jsfiddle <– actually uses box-shaodw and not a gradient

Answer 1

Here is an answer. I just floated a div to the right faded it from 0 to 100% opacity.

.hello-jupiter {
    display:inline-block;
    background: rgba(215, 215, 215, 1);
    color:white;
    box-shadow: inset 0px 10px 15px -10px rgba(50, 50, 50, .5), inset 0px -10px 25px -10px rgba(50, 50, 50, .75);
    position:relative;
}

.fader {
    position:absolute;
    top:0px;
    right:0px;
    display:block;
    width:75px;
    background: -webkit-linear-gradient(left,rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 1) 75%)
}

http://jsfiddle.net/w92xv/45/