In earlier versions of web, gradient effect had to be created with images. However, by using CSS3 gradients you can reduce download time and bandwidth usage. In addition, elements with gradients look better when zoomed, because the gradient is generated by the browser and is scalable.

Gradients are typically one color that fades into another, but in CSS you can control every aspect of how that happens, from the direction to the colors (as many as you want) to where those colors changes happen.

CSS-based gradients are currently supported by Firefox, Safari, Chrome, and Opera browsers and are included in Internet Explorer 10 and newer as well.

NOTE: For browsers that don't support CSS gradients, make sure that you specify a background color as a backup.

There are two types of gradients in CSS3, which will be discussed in further chapters, and these are:

  1. Linear gradient
  2. Radial gradient


›› go to examples ››