8.3 CSS gradients

When we talk about gradients in CSS, we talk about gradients of colors.

There are 2 types of gradients in CSS:

• linear: colors go from point to another, in a straight line
• radials: colors go from the center of a circle to its edges, in all directions

A gradient is considered a background image and must be used with the according property.

linear-gradient

The syntax for linear gradients is quite complex, but the basic idea is to define:

• which colors you want
• where these colors must appear along the axis (at the start, middle, end, etc.)
• in which direction the gradient must go

Let’s start with a simple 2 color gradient:

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

<div>A simple vertical background gradient</div>

By default:

• the direction is vertical, from top to bottom
• the first color is at the start (top)
• the second color is at the end (bottom)

Changing the direction

If the top to bottom direction doesn’t suit you, you can alter it by either:

• defining the destination of the gradient, with keywords like to left top
• defining a specific angle in degrees like 45 deg

This direction must be set before the colors:

div{ background-image: linear-gradient(to bottom right, yellow, purple); width: 200px;}

<div>A diagonal gradient from the top left corner to the bottom right one</div>

If you want a more specific angle, you can use a value in degrees:

• 0deg is the default value, from top to bottom
• 20deg is slightly diagonal, going clockwise
• 90deg is like 3pm, from right to left
• 180deg is from bottom to top

div{ background-image: linear-gradient(20deg, green, blue); width: 150px;}

<div>A diagonal gradient with an angle of 20 degrees</div>

Adding more colors

You can insert as many colors as you want. They will be equally distributed along the axis:

• 2 colors: 0% and 100%
• 3 colors: 0%, 50% and 100%
• 4 colors: 0%, 33%, 67% and 100%

div{ background-image: linear-gradient(orange, grey, yellow); width: 150px;}

<div>A rather ugly gradient, but you get the idea</div>

Setting specific color stops

If you don’t want colors to equally distributed, you can set specific color stop positions, using either percentages % or pixels px:

div{ background-image: linear-gradient(orange, grey 10%, yellow 50%); width: 150px;}

<div>An even uglier gradient, but you get the idea</div>

In this setup:

• orange has no stop position, so it defaults to zero 0%
• grey is closer to the top, at 10% instead of 50%
• yellow takes half of the gradient, from 50% to the end 100%

radial-gradient

While linear gradients follow a single-line axis, radial gradients spread out in all directions. Their syntax is fairly similar to linear ones, as they both have color stops. But instead of specifying a direction you need to specify:

• a shape: either a circle or an ellipse
• a starting point: which will be the center of the circle/ellipse
• an end point: where the edge of the circle/ellipse will be

div{ background-image: radial-gradient(red, yellow); padding: 1rem; width: 300px;}

<div>This looks like the sun, doesn't it?</div>

By default:

• the gradient is an ellipse
• the first color starts at the center
• the last color ends at the farthest corner

start position

The start position works like background positions. You set it with the at keyword.

div{ background-image: radial-gradient(at top right, black, lightgrey); padding: 1rem; width: 300px;}

<div>A gloomy day.</div>

end position

By default, the shape will end at the farthest corner. You can either choose:

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

The difference is both hard to grasp and to visualize, so I won’t go into details. Mozilla has a good description of the different values.

div{ background-image: radial-gradient(closest-corner at 20px 20px, green, blue); padding: 1rem; width: 300px;}
div:hover{ background-image: radial-gradient(farthest-side at 20px 20px, green, blue)}

<div>Hover this green star in the sky to see it expand.</div>

fixed size

Instead of setting both start and end positions, you can just set specific dimensions:

div{ background-image: radial-gradient(20px 10px at 75% 50%, darkviolet, pink); padding: 1rem; width: 300px;}

<div>A small violet disc in a sea of pink.</div>

CSS gradients are powerful, considering how endless the options are.

The examples of this page are voluntarily “ugly”, with pronounced color differences, to better explain what how each property works.

But it’s quite easy to write more subtle gradients, especially for buttons:

.button-grey  { background-image: linear-gradient(#f2f2f2, #f2f2f2);}
.button-yellow{ background-image: linear-gradient(#fce374, #fcdf5b);}
.button-orange{ background-image: linear-gradient(#f58a38, #f57c20);}
.button-red   { background-image: linear-gradient(#ed6d64, #ed574c);}
.button-purple{ background-image: linear-gradient(#847bba, #7568ba);}
.button-blue  { background-image: linear-gradient(#42b0e3, #2ba9e3);}
.button-green { background-image: linear-gradient(#97cc76, #8bcc62);}