CSS gradients are a much better than using images for gradient effects. NOTE: gradients are background images.
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);
}
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