CSS Gradients: A Syntax Crash Course

In the past most websites used images heavily to create a fancy UI. Thanks to various CSS properties this trend has changed. This tutorial will help you to learn about CSS gradients.You can use gradients to replace images in various UI elements as well as in backgrounds. With a little practice you can create complex patterns without using a single image.

CSS gradients, which have excellent browser support, allow you to create smooth visual transitions between two or more specified colors. Gradients give you control over a lot of settings like the size of the gradient, its angle, position of color stops, etc.

In this post, I’ll cover linear, radial, as well as the newer repeating gradients.

Linear Gradients

Linear gradients are the most commonly used gradients. The looks like this, with the bracketed values representing the types of values:

.example {
  background: linear-gradient(
    [direction], [first-color], [second-color], [more-colors ...]
  );
}

If you don’t specify a direction, the gradient will start at the top with full strength of the first color then smoothly transition to the last color as it reaches the bottom.

For more control, you can specify the direction of gradient. You can do it either by using simple terms like to left, to bottom right, or you can specify angles. Here is the code snippet to create a background that goes from left to right:

.example {
  background: linear-gradient(to right, hotpink, lightpink);
}

See the Pen Left to Right Linear Gradient by SitePoint (@SitePoint) on CodePen.

Older browsers support a slightly different syntax and require browser specific prefixes. In older browsers, instead of specifying the end point you specify a start point. CSS3 gradient code for older browsers looks like this:

.example {
    background: -prefix-linear-gradient(left, red, blue);
}

Specifying Angles for Linear Gradients

If you need to create a gradient at a specific angle, you can specify one directly. The code below creates a gradient at an angle of 60 degrees.

.example {
  background: linear-gradient(60deg, red, blue);
}

Considering a line from bottom to top to be at zero degrees, the angle increases if the line moves in a clockwise direction. For instance:

.example {
  background: linear-gradient(0deg, red, blue);
}

This will create a gradient with red at the bottom and blue at the top. While the following will create a horizontal gradient with red on the left side and blue on the right:

.example {
  background: linear-gradient(90deg, red, blue);
}

See the Pen Linear Gradients with Different Angles by SitePoint (@SitePoint) on CodePen.

Specifying Color Stops in Linear Gradients

If you want to change the colors non-uniformly you can specify color stops yourself. Position of color stops can be specified as a percentage value or an absolute length. You don’t need to specify the stop position for first and last color. A given color is at its full strength on the position that you specified. Here, is an example:

.example {
  background: linear-gradient(
    to bottom, yellow, red 70%, black
  );
}

If there are no stops specified, the colors will be spaced evenly.

See the Pen Linear Gradient with Color Stops by SitePoint (@SitePoint) on CodePen.

Radial Gradients

Radial gradients are less common and more complex. This is the syntax for radial gradients:

.example {
  background: radial-gradient(
    [shape] [size and position], [first-color], [more-colors ...], [last-color]
  );
}

When nothing is specified, the default shape is an ellipse, the size is the farthest corner, and its position is center. Color stops are specified exactly as in linear gradients. The following snippet will draw a radial gradient in the shape of an ellipse:

.example {
  background: radial-gradient(yellow, red, black);
}

See the Pen Radial Gradient Example by SitePoint (@SitePoint) on CodePen.

Changing the Size of a Radial Gradient

The size of a radial gradient is determined by four values: closest-side, farthest-side, closest-corner, and farthest-corner. When used with the shape value, these keywords define the shape. The shape of the gradient works under the assumption that the gradient will continually infinitely, past the borders of the element on which the gradient is applied.

Let’s take a look at an example to make this more clear. We’ll create four gradients on four elements:

<div class="gradient1"></div>
<div class="gradient2"></div>
<div class="gradient3"></div>
<div class="gradient4"></div>

In the CSS below, I’m using the four keyword values:

.gradient1 {
  background: radial-gradient(circle farthest-corner, red, black);
}

.gradient2 {
  background: 
   radial-gradient(circle farthest-side, red, black);
}

.gradient3 {
  background: radial-gradient(circle closest-side, red, black);
}

.gradient4 {
  background: radial-gradient(circle closest-corner, red, black);
}

See the Pen Radial Gradients with Different Size Keyword Values by SitePoint (@SitePoint) on CodePen.

Notice in the demo how there is a slight, but noticeable difference in each gradient.

Defining Color Stops in Radial Gradients

Color stops in radial gradients are similar to linear gradients. Observe that I have also specified the position of the center of the circle as a percentage. You can also use pixel values if you wish. Here is a code snippet to show this in action:

.example {
    background: radial-gradient(
      circle closest-side at 20% 50%, yellow, red 70%, black
    );
}

See the Pen Radial Gradient with Color Stops by SitePoint (@SitePoint) on CodePen.

Repeating Gradients

Repeating gradients are similar to the other gradients and take the same arguments. The only difference is that they repeat the color stops infinitely. The positions of colors are shifted by multiples of the length of the basic gradient. As you will see, this repetition allows us to create complex patterns and backgrounds.

One point worth keeping in mind is that when you use multiple repeating gradients on the same element, the first gradient will appear on top. Naturally, this means that if every color of the first gradient is 100% opaque (i.e. no transparency) the other gradients in the stack will not be visible.

Repeating Linear Gradients

To create a basic repeating linear gradient, we can do the following:

.example {
  background: repeating-linear-gradient(
    45deg, red, red 5px, white 5px, white 10px
  );
}

See the Pen Repeating Linear Gradient by SitePoint (@SitePoint) on CodePen.

To change color abruptly you have to specify two colors. To create a subtle pattern you just need to add another gradient the same way you would do multiple background images:

background:
  repeating-linear-gradient(
    -45deg, rgba(255, 0, 0, 0.2), rgba(255, 0, 0, 0.2) 5px,
    transparent 5px, transparent 10px
  ),
  repeating-linear-gradient(45deg, rgba(255, 0, 0, 0.2),
    rgba(255, 0, 0, 0.2) 5px, white 5px, white 10px
  );

This time I made the gradient transparent instead of white. I suggest experimenting with different position of color stops and angles.

See the Pen Repeating Linear Gradient with Multiple Gradients by SitePoint (@SitePoint) on CodePen.

Repeating Radial Gradients

Repeating radial gradients are similar to standard radial gradients. Here is the code to create a simple repeating radial gradient:

.example {
  background: repeating-radial-gradient(
    circle, black, black 6px, red 6px, red 10px
  );
}

See the Pen Repeating Radial Gradient by SitePoint (@SitePoint) on CodePen.

You can also layer multiple repeating radial gradients, like this:

.example {
  background: 
   repeating-radial-gradient(
     farthest-corner at 10% 10%, rgba(0, 0, 0, 0.7),
     rgba(0, 255, 0, 0.2) 15px, rgba(0, 255, 0, 0.1) 25px
   ),
   repeating-radial-gradient(
     closest-corner at 90% 90%, 
     rgba(0, 0, 0, 0.7), rgba(255, 0, 0, 0.2) 15px,
     rgba(255, 0, 0, 0.1) 25px
   ), 
   repeating-radial-gradient(
     farthest-corner at 10% 90%, rgba(0, 0, 0, 0.7),
     rgba(0, 255, 0, 0.2) 15px, rgba(0, 255, 0, 0.1) 25px
   );
 }

See the Pen Repeating Radial Gradient with Multiple Gradients by SitePoint (@SitePoint) on CodePen.

Conclusion

In this tutorial I have tried to cover every aspect of CSS gradients. Gradients can eliminate the need for using images in a lot of cases where you need simple patterns. Of course, while gradients do avoid the extra HTTP requests of images, they can still cause problems with performance, so they should be used with care.

Frequently Asked Questions about CSS Gradients