Lesson 27: Gradients

Imagine you’ve got a site to build. At the top there’s an intro with a heading, a summary, and a button. The designer hands you a design that has a purple background for this intro. The only problem is that the background uses two shades of purple as a gradient. How do you do this?

You might think you need to export an image from your design tool for this. But you can use a linear-gradient instead.

A gradient is an image. You can use it anywhere you can use an image, but you make it with CSS. It’s made from colors, numbers, and angles. CSS gradients let you create anything from a smooth blend between two colors to impressive artwork by mixing and repeating many gradients.

Linear gradient#

The linear-gradient() function makes an image of one or more colors that change bit by bit. It takes more than one argument. In its simplest form, you pass in one or more colors like this and it splits them evenly and blends them for you.

.my-element {
    background: linear-gradient(black, white);
}

It’s valid CSS to use only one color in a gradient function. But this only makes a solid color.

.my-element {
    background: linear-gradient(red);
}

You can also pass an angle, or keywords that stand for an angle. If you use keywords, give a direction after the to keyword. So if you want a gradient that goes from black on the left to white on the right, you would write to right as the first argument.

.my-element {
    background: linear-gradient(to right, black, white);
}

A color stop sets where a color stops and blends with its neighbors. Say you want a gradient that starts with a dark shade of red and runs at a 45deg angle. At 30% of the way across the gradient, it changes to a lighter red. It looks like this.

.my-element {
    background: linear-gradient(45deg, darkred 30%, crimson);
}

You can add as many colors and color stops as you like in a linear-gradient(). You can also layer gradients on top of each other by separating each gradient with a comma.

Radial gradient#

To make a gradient that spreads out in a circle, the radial-gradient() function steps in to help. It’s a lot like linear-gradient(). But instead of an angle, you can give it a position and an ending shape. If you give it only colors, the radial-gradient() picks center for the position. It then picks a circle or an ellipse, depending on the size of the box.

.my-element {
    background: radial-gradient(white, black);
}

The gradient’s position works like background-position, using keywords or number values. The size of the radial gradient sets the size of the ending shape, which is a circle or an ellipse. By default it’s farthest-corner, which means the shape exactly meets the corner of the box that is farthest from the center. You can also use the keywords listed here.

• closest-corner meets the corner closest to the center of the gradient.
• closest-side meets the side of the box closest to the center of the gradient.
• farthest-side does the opposite of closest-side.

You can add as many color stops as you like, just like with the linear-gradient. You can also add as many radial-gradients as you like.

Conic gradient#

A conic gradient has a center point in your box. It starts at the top by default and goes around in a full 360 degree circle.

.my-element {
    background: conic-gradient(white, black);
}

The conic-gradient() function takes position and angle arguments.

By default the angle is 0 degrees, which starts at the top, in the center. If you set the angle to 45deg, it would start at the top right corner. The angle argument takes any kind of angle value, like the linear and radial gradients.

The position is center by default. As with radial and linear gradients, you can set the position with keywords or with number values.

You can add as many color stops as you want, like with the other gradient types. A good use for conic gradients is rendering pie charts with CSS.

Repeating and mixing#

Each type of gradient has a repeating type too. These are repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient(). They work like the non-repeating functions and take the same arguments. The difference is that the gradient repeats to fill the box if it can, based on the size of the gradient and the size of the box.

If your gradient doesn’t seem to repeat, you probably haven’t set a length for one of the color stops. For example, you can make a striped background with a repeating-linear-gradient by setting color stop lengths.

.my-element {
  background: repeating-linear-gradient(
    45deg,
    red,
    red 30px,
    white 30px,
    white 60px
  );
}

You can also mix gradient functions on background properties. You can define as many gradients as you like, just like you would with a background image. For example, you can mix many linear gradients together, or two linear gradients with a radial gradient.

Interpolation and color spaces#

Each gradient type can blend between colors in different ways. It does this with color spaces and the in keyword. This option lets you customize the results between two color stops in a gradient.

For example, you can use the oklab color space to remove dull middle colors and make a safer, more vibrant gradient.

.my-element {
  background: linear-gradient(in oklch, deeppink, yellow);
}

The demo below lets you compare the same gradient with and without custom blending. Try changing the color spaces to see how they compare. You can even change the colors to see how the blending changes the gradient.

You can also use the increasing or decreasing keywords with cylindrical color spaces. These control the direction the hue angle moves in as a gradient goes from one color to the next. The angle always moves in the direction of the keyword you choose, whether that is the longer or the shorter way.

.my-element.increasing {
  background: linear-gradient(in oklch increasing hue, deeppink, yellow);
}

.my-element.decreasing {
  background: linear-gradient(in oklch decreasing hue, deeppink, yellow);
}

Cylindrical color spaces are HSL, HWB, LCH, and OKLCH. As well as custom blending, they offer the shorter keyword, which is the default, and the longer keyword. These say if the gradient line should take the long way around the color wheel or the short way between the two colors.

.my-element {
  background: linear-gradient(in oklch longer hue, deeppink, yellow);
}

Resources#

• MDN guide to gradients
• Gradient generator
• Conic.css - a useful collection of conic gradients

Adapted from Learn CSS © Google and contributors, licensed under CC BY 4.0 (prose) and Apache 2.0 (code samples).