How do you fade horizontal text into a vertical gradient? - css

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

I find this website is handy for CSS...
http://www.css3maker.com/css-gradient.html
CSS generated from the css3maker website:
.hello-jupiter {
display:inline-block;
background: rgba(215, 215, 215, 1);
color:white;
background:-webkit-gradient(linear, 100% 0%, 37% 0%, from(#FFFFFF), to(#000000))
}
This will only work in Chrome and Safari versions 4.0+

Answer 2

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/