Gradients

Gradients are usually one color that fades into another, but CSS gives you the control to set how that happens. You can set the direction and much more. While declaring a solid color uses the background-color property in CSS, gradients use background.

How we apply gradients has evolved quite a bit over the past few years. So we are showing you the "new way" and the "old way" of styling for gradients. The newer syntax is needed by standard-compliant browsers (Opera 12.1, IE10, Firefox 16, Chrome 26, Safari 6.1 If you need to support older browsers, you will need to use the old prefixed syntax.

Below are two examples: one for a linear gradient and one for a radial gradient. We frequently use one or both of these in our templates.

The Linear Gradient:

Linear Gradient
css - The New Way
  1. .linear1 {
  2. background-color: #364a70;
  3. background: linear-gradient(#758cb9, #364a70);
  4. }
css - The Old Way
  1. .linear1 {
  2. background: #364a70;
  3. background-image: linear-gradient(top, #758cb9, #364a70);
  4. background-image: -webkit-linear-gradient(top, #758cb9, #364a70);
  5. background-image: -moz-linear-gradient(top, #758cb9, #364a70);
  6. background-image: -ms-linear-gradient(top, #758cb9, #364a70);
  7. background-image: -o-linear-gradient(top, #758cb9, #364a70);
  8. }

The Radial Gradient:

Radial Gradient
css - The New Way
  1. .radial02 {
  2. background-color: #aba873;
  3. background-image: radial-gradient(#aba873, #625d30);
  4. }
css - The Old Way
  1. .radial02 {
  2. background: #aba873;
  3. background-image: radial-gradient(center, circle cover, #aba873, #625d30);
  4. background-image: -moz-radial-gradient(center, circle cover, #aba873, #625d30);
  5. background-image: -webkit-radial-gradient(center center, circle cover, #aba873, #625d30);
  6. background-image: -ms-radial-gradient(center center, circle cover, #aba873, #625d30);
  7. background-image: -o-radial-gradient(center center, circle cover, #aba873, #625d30);
  8. }

Learn More:

Gradients can go from top to bottom, from side to side, on an angle, and can have multiple color values. They can be simple or they can be quite complex. We have shown you only two simple examples to get you started.