Gradients

On this page

Gradient types

There are several kinds of gradient that can be presented in different ways. Gradient can come in the following types:

• linear-gradient
• repeating-linear-gradient
• radial-gradient
• repeating-radial-gradient
• conic-gradient
• repeating-conic-gradient

Basics

CSS gradients are set as background images using a keyword like linear-gradient instead of url().

div {
    background-image: linear-gradient(blue, red);
}

This produces the following gradient. Note the direction when not declared uses the default to bottom. This could also be written in degrees as 180deg instead.

Direction

You can change the direction using keywords or degrees. HOWEVER if using diagonal keywords like to bottom right note that this is NOT the same as 45deg unless the containing element is a square. The gradient goes from one corner to another.

div {
    background-image: linear-gradient(to bottom right, red, yellow);
}

Colour stops

You can also define where a colour starts using a percentage value:

div {
    background-image: linear-gradient(to right, blue, purple 25%);
}

Adding a colour stop to the first colour marks it’s finishing point. When the next colour starts at the same point it produces a hard edge.

div {
    background-image: linear-gradient(to right, blue 50%, purple 50%);
}

Repeating gradients

Repeating gradients require stops so they know how far to go before they repeat.

div {
    background-image: repeating-linear-gradient(red 25px, goldenrod 50px);
}

This type of gradient will repeat a pattern until the element is filled. This is done using stops AFTER the colour:

div {
    background-image: repeating-linear-gradient(45deg, red 0 20px, goldenrod 20px 40px);
}

This same basic syntax works with radial gradients too:

div {
    background-image: repeating-radial-gradient(circle, red 0 20px, goldenrod 20px 40px);
}

However you can angle a linear gradient but that makes no sense with a radial gradient. For linear gradients add the angle you

Radial gradients

Here is a radial gradient.

div {
    background-image: radial-gradient(white, black);
}

Notice how the gradient is squashed to fit the size of the container. The default shape for radial gradients is ellipse.

Changed to circle we get:

The CSS is:

div {
    background-image: radial-gradient(circle, white, black);
}

To get the circle to fit in completely use closest-side like this:

div {
    background-image: radial-gradient(circle closest-side, white, black);
}

This produces:

Other options are:

• closest-corner
• farthest-corner
• farthest-side

Using hard edges you can create a circle:

div {
    background-image: radial-gradient(circle, #aaa 0 70px, #666 70px 85px, #aaa 85px);
}

Positioning gradients

The default position is in the centre. However you can change this using the at keyword:

div {
    background-image: radial-gradient(circle at top right, white, black);
}

For greater accuracy you can use percentages. The X axis (left to right) comes first:

div {
    background-image: radial-gradient(circle at 30% 60%, black, white);
}

Conic gradients

At first these might seem to be much use. Here is the simplest conic-gradient:

div {
    background-image: conic-gradient(black, white);
}

You can make these more interesing by simply adding an extra colour:

div {
    background-image: conic-gradient(from 135deg, black, white, black);
}

They can be used to make pie charts. Especially handy as the angles are in percentages.

Even more interesting is the repeating version of conic-gradient. You can also use this to make a sunburst background using a hard edged repeating-conic-gradient like this:

div {
    background-image: repeating-conic-gradient(at 50% 100%, tomato 5deg 10deg, goldenrod 10deg 15deg);
}

This is extremely cool. One short line of CSS makes a fully responsive, highly customizable starburst effect. You can resize the box to see what it looks like at different sizes and different aspect ratios.

Conclusion

It useful to know how to write simple gradients like those above. The main things to remember are:

1. Using linear-gradient() or radial-gradient() as our background image.
2. For linear gradients how to set the direction from the default to bottom using to right, to top to top left etc. or using degrees 30deg
3. For radial gradients how to set the shape from the default ellipse to circle and how to set the size using closest-side, farthest-corner etc. and the position using at with bottom left etc..

Gradient generators

For more complicated gradients it might be easier to use an online CSS gradient tool. The only problem is which one to use. There is a huge ever growing number of gradient generators some better at one thing, like stripes for intance or another. These can help not just with the coding but allow you to see the gradients first before even thinking about the code.

Here are a few I like:

1. UI Gradients has a good selection that can be browsed by colour and viewed as a full screen too.
2. Gradient Animator. Choose 2 or more colours and an oversize background is created: 800% x 800%. This is then moved around using background-position and @keyframes. CSS is intantly generated.
3. CSS Gradient.io makes it easy to adjust colour stops visually for both radial and linear gradients.
4. Color Space is similar but allows you to choose 2 or 3 specific colours via a colour picker as well as direction.
5. Web Gradients 180 pre-made subtle linear gradients that are easy to select and view full screen.
6. CSS Gradient Generator allows radial gradients and updates immediately though you can only choose two colours. Another one just called Gradient Generator is similar.
7. Josh Comeau’s gradient generator uses some clever maths to fake next level gradient colours today. (The gradients produced avoid muddy greys where colours blend).