CSS Gradients in Action

Chris Williams has been having some fun with CSS gradients on a quest to create nice looking elements without images.

He uses CSS like this:

.albumInfo {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#626262), to(#000000), color-stop(.5, #202020), color-stop(.5, #000000));
height: 8em;
padding: 1em;
border-top: 1px solid #858585;
border-bottom: 1px solid #505050;
}
.albumInfo h1 {
font-weight: bold;
text-shadow: 0px -1px 1px black;
font-size: 1.2em;
}
ul.tracks {
background: -webkit-gradient(radial, 50% -70, 0, 50% 0, 200, from(#595959), to(#0d0d0d)) #0d0d0d;
width: 25.7em;
}
ul.tracks li.odd {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.05)), to(rgba(255,255,255,.05)));
}

This example demonstrates the power of WebKit’s implementation of gradients in css. This similar looking display to that of the iPhone album display uses a radial gradient (opposed to a linear) as the background for the track names. The overall effect is a dim light. The odd numbered tracks also use a gradient to take advantage of -webkit-gradient’s support of alpha values.

None of the gradients will work in other browsers. Check that your background and text are not the same color. The outermost div is set to black so it's viewable in other browsers.

Sheer Heart Attack is my favorite Queen album. I'm also quite fond of A Night At The Opera.

If you have better solution, just tell me !