Color gradients are frequently used on web pages so let's go through the basics.

The two CSS features we will use here are regular background images and CSS gradients. Background images are pretty reliable but some surfers might turn off images to save on bandwidth (due to cost or slow connection) and CSS gradients are only supported by newer web browsers so we need a fallback solution in both cases, background-color.

We will use a two-color, vertical gradient. With background images, the fallback background-color should match the top or the bottom of the gradient image so that if the image doesn't cover its element we will get a smooth transition. Pick the top or bottom color (and adjust background-position accordingly) so that you get the best contrast between text and background-color.

Continue reading →