Background Gradients

CSS gradients are a much better than using images for gradient effects. NOTE: gradients are background images.

Linear-gradient

The linear-gradient can display gradients along a single direction:
background: linear-gradient(gradient-direction, starting-color, next-color, ...end-color);

#linear-gradient{
	background: linear-gradient(300deg, white, cornflowerblue, blue);
}

Radial-gradient

The radial-gradient can display gradients spreading outwards in all directions from a starting point:
background: radial-gradient(shape at starting-point, starting-color, next-color, ...end-color);

#radial-gradient{
	background:radial-gradient(circle at center, white 0, cornflowerblue, blue 100%);
}

There will be plenty of gradient variations available, though only linear-gradient has good support at present.

Css-tricks provides examples of several gradient techniques. Experiment with the CSS gradient code generator to get a feel for the variety of options.

Css-tricks provides detailed examples for a variety of gradient useages