The CSS Podcast - 021: Gradients

Imagine you've got a site to build and at the top,there's an intro with a heading, summary and a button.The designer has handed over a design which has a purple background for this intro.The only problem is the background features two shades of purple as a gradient.How do you do this?

You might initially think that you're going to need to export an image from your design tool for this,but you can use alinear-gradientinstead.

A gradient is an image and can be used anywhere images can be used,but it's created with CSS and is made up with colors, numbers and angles.CSS gradients allow you to create anything from a smooth gradient between two colors,right up to impressive artwork by mixing and repeating multiple gradients.

Linear gradient

Thelinear-gradient()function generates an image of one or more colors, progressively.It takes multiple arguments, but in its simplest configuration,you can pass in one or more colors like this and it will automatically split them evenly,while blending them.

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

Although it's valid CSS to use only one color in gradient functions, this willonly produce a solid color:

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

You can also pass an angle or keywords that represent an angle.If you choose to use keywords, specify a direction after theto keyword.This means if you want a gradient that is black and white,that runs from left (black) to right (white),you would specify the angle asto right as the first argument.

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

A color stop value defined where a color stops and mixes with its neighbors.For a gradient starting with a dark shade of red running at a 45deg angle,at 30% of the size of the gradient changing to a lighter red: it looks like this.

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

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

Radial gradient

To create a gradient that radiates in a circular fashion, theradial-gradient()function steps in to help.It's similar tolinear-gradient(),but instead of specifying an angle, you optionally specify a position and ending shape.If you just specify colors, theradial-gradient() will auto-select the position ascenterand select either a circle or ellipse, depending on the size of the box.

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

The gradient's position is similar tobackground-position using keywords and/or number values.The size of the radial gradient determines the size of the gradient's ending shape(circle or ellipse) and by default will befarthest-corner,which means it exactly meets the farthest corner of the box from the center.You can also use the following keywords:

• closest-corner will meet the closest corner to the center of the gradient.
• closest-side will meet the side of the box closest to the center of the gradient.
• farthest-side will do the opposite toclosest-side.

You can add as many color stops as you like, just like with thelinear-gradient.Likewise, you can add as manyradial-gradients as you like too.

Conic gradient

A conic gradient has a center point in your box and starts from the top (by default),and goes around in a 360 degree circle.

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

Theconic-gradient()function accepts position and angle arguments.

By default, the angle is 0 degrees which starts at the top, in the center.If you were to set the angle to be45deg, it would be the top right corner.The angle argument accepts any type of angle value, like the linear and radial gradients.

The position is center by default.As with radial and linear gradients,positioning can be keyword-based,or it can be defined with numeric values.

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

Repeating and mixing

Each type of gradient has a repeating type, too.These arerepeating-linear-gradient(),repeating-radial-gradient() andrepeating-conic-gradient().They are similar to the non-repeating functions and take the same arguments.The difference is that if the defined gradient can be repeated to fill the box,based on both of their sizes, it will.

If your gradient doesn't appear to be repeating,you probably haven't set a length for one of the color stops.For example,you can create a striped background with arepeating-linear-gradient by setting color stop lengths.

.my-element{background:repeating-linear-gradient(45deg,red,red30px,white30px,white60px);}

You can also mix gradient functions onbackground properties,as well as defining as many gradients as you like,just like you would with a background image.For example, you can mix multiple linear-gradients together, or two linear-gradients with a radial gradient.

Interpolation and color spaces

Each gradient type can interpolate between colors in different ways usingcolor spaces and thein keyword. This option lets youcustomize the results between two color stops in a gradient.

For example, you can use theoklab color space to generally remove unsaturated middle colors to produce a safer and more vibrant gradient.

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

The following demo lets you compare the same gradient with and without customized interpolation. Try changing the color spaces to see how they compare, or even change the colors to see how the interpolation affects the gradient.

You can also use theincreasing ordecreasing keywords with cylindrical color spaces to control the direction of the hue angle progression as a gradient changes from one color to the next. The angle will always move in the direction of the chosen keyword, regardless of whether that is longer or shorter.

.my-element.increasing{background:linear-gradient(inoklchincreasinghue,deeppink,yellow);}.my-element.decreasing{background:linear-gradient(inoklchdecreasinghue,deeppink,yellow);}

In addition to customizing interpolation, cylindrical color spaces (HSL, HWB, LCH, and OKLCH) offer theshorter (default) orlonger keywords to specify if the gradient line should take thelong way around the color wheel or theshort way between the two colors.

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

Resources

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

Check your understanding

Test your knowledge of gradients