CSS Gradients: A Syntax Crash Course

Share this article

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

What is the difference between linear and radial gradients in CSS?

In CSS, gradients are used to create a smooth transition between two or more specified colors. Linear gradients transition colors along a straight line, starting from one point and ending at another. The direction of the gradient can be defined by an angle, such as “to right” or “45deg”, or by stating a starting point, like “to top right”.

On the other hand, radial gradients transition colors in a circular or elliptical pattern. They start at a single point and spread outwards, creating a circular or elliptical shape. The shape, size, and position of the radial gradient can be controlled using various parameters.

How can I create a repeating gradient in CSS?

CSS provides a way to create repeating gradients using the repeating-linear-gradient() and repeating-radial-gradient() functions. These functions work similarly to their non-repeating counterparts, but they repeat the specified gradient pattern indefinitely, creating a seamless repeating pattern. The syntax for these functions is similar to the syntax for linear-gradient() and radial-gradient(), but you need to specify the color stops in a way that creates a repeating pattern.

What are color stops in CSS gradients?

Color stops are the values that define the colors you want to render smooth transitions among, and at what point each color should appear within the gradient. In CSS gradients, you can specify as many color stops as you like. Each color stop is defined by a color value, followed optionally by a length or percentage. If you don’t specify a length or percentage, the color stops are spaced evenly.

How can I control the direction of a linear gradient?

The direction of a linear gradient can be controlled using the first parameter of the linear-gradient() function. This parameter can be an angle, such as “45deg”, or a keyword that specifies a starting point, such as “to right” or “to top left”. If you don’t specify a direction, the gradient goes from top to bottom.

How can I control the shape and size of a radial gradient?

The shape and size of a radial gradient can be controlled using the first parameter of the radial-gradient() function. This parameter can be a shape keyword (“circle” or “ellipse”), followed optionally by a size keyword (“closest-side”, “farthest-side”, “closest-corner”, “farthest-corner”), and/or a position. If you don’t specify a shape, the gradient is elliptical. If you don’t specify a size, the gradient extends to the closest side.

Can I use transparency in CSS gradients?

Yes, you can use transparency in CSS gradients by using RGBA color values. An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

How can I create a gradient with hard color changes?

To create a gradient with hard color changes, you can use multiple color stops with the same position. For example, “blue, green 50%, green 50%, yellow” creates a gradient that changes abruptly from blue to green at the middle, and from green to yellow at the end.

Can I use gradients as background images?

Yes, you can use gradients as background images in CSS. The gradient functions return a CSS data type, which can be used anywhere an image can be used. For example, you can use a gradient as the background image of an element, or as part of a multiple background.

Can I animate gradients in CSS?

CSS doesn’t support the animation of gradients directly. However, you can achieve a similar effect by animating the background-position or background-size of an element with a repeating gradient, or by using a gradient as a mask over animated content.

Are CSS gradients supported in all browsers?

CSS gradients are widely supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Internet Explorer 10 and above. However, for older browsers that don’t support gradients, you should provide a fallback color.

Baljeet RathiBaljeet Rathi
View Author

Baljeet is a writer and web developer based in India. Although he is a full-stack developer, he is most passionate about things related to the front-end. He has been involved with web development for more than five years now.

AdvancedCSScss gradientscss3 gradientslinear gradientsLouisLradial gradientsrepeating gradients
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form