Fun with CSS gradients

Posted on December 12nd 2020 in CSS by Pim Debaere.

Fun with CSS gradients

The fact that we can provide color gradients with the help of CSS is already a well-known fact. In terms of performance, it is also a lot better to use CSS gradients instead of (background) images. But we can also use CSS gradients for more complex things.

Usually it is one color that transitions to another color, but CSS allows us to control every aspect of how this happens. This way we can also indicate the direction and the shape. There are three types we can use for this: linear, radial and conic.

Linear gradients

Linear gradients may be the most commonly used. They are simple transitions that go from one side to the other, for example from left to right or from top to bottom.

1
2
3
#linear {
  background-image: linear-gradient(#ce0000, #ceb500);
}

Fig. 1 – Simple linear gradient.

Note that we did not provide the direction in the example above. By default CSS will display a linear transition from top to bottom, thus to bottom, or 180deg. So we could also have written this as follows, to explicitly indicate it.

1
2
3
4
5
6
7
8
9
/* explicitly indicate the direction */
#linear {
  background-image: linear-gradient(to bottom, #ce0000, #ceb500);
}

/* explicitly indicate the degrees */
#linear {
  background-image: linear-gradient(180deg, #ce0000, #ceb500);
}

Fig. 2 – Simple linear transition (explicit).

We can easily change the direction by specifying the direction itself, in plain text. We have the choice between bottom, top, left, right and combinations of two directions, for example to top left to go diagonally. If you still want to deviate from these eight directions, you can always enter the number of degrees. Some examples:

1
2
3
4
5
6
7
8
9
10
11
#linear-to-right { 
  background-image: linear-gradient(to right, #ce0000, #ceb500);
}

#linear-to-top-left { 
  background-image: linear-gradient(to top left, #ce0000, #ceb500);
}

#linear-in-degrees { 
  background-image: linear-gradient(-50deg, #ce0000, #ceb500);
}

Fig. 3 – Examples of linear gradients.

You want more than two colors? No problem, you can use multiple colors in the same gradient!

1
2
3
#linear-multiple { 
  background-image: linear-gradient(#ce0000, #ceb500, #00ce00);
}

Fig. 4 – Multiple colors in one linear gradient.

#linear

#linear-to-right

#linear-to-top-left

#linear-in-degrees

#linear-multiple

Fig. 5 – CSS linear gradients, results of the above examples.

Radial gradients

Radial gradients differ from linear gradients because the starting point is a certain point on the element and not a full edge. You indicate the simplest radial gradient as follows:

1
2
3
#radial {
  width: 220px; background-image: radial-gradient(green, #ce0000);
}

Fig. 6 – Simple radial gradient.

Of course, some properties can also be changed here, such as shape and position. The first can be useful to use a circle as a gradient in non-square elements. The second one indicates where the gradient should focus. Combined you get, for example, the following:

1
2
3
4
#radial-shape {
  width: 220px;
  background-image: radial-gradient(circle at top left, green, #ce0000);
}

Fig. 7 – Radial gradients with adjusted properties.

#radial

#radial-shape

Fig. 8 – CSS radial gradients, results of the above examples.

Conic gradients

Finally, we have conic gradients. These are similar to the radial gradients, but the starting point seems to be elevated, making it look like a cone. Without specifying specific properties, it looks like this:

1
2
3
#conic {
  background-image: conic-gradient(green, #ce0000);
}

Fig. 9 – Simple conic gradient.

As you will see below, this is not the result we expect from a cone. This is because the transition starts at 0° by default and ends at 360°. This creates a hard stop. Fortunately we can add a third parameter, an extra color, to counteract this hard stop.

1
2
3
#conic-smooth {
  background-image: conic-gradient(#00ce00, #ce0000, #00ce5c);
}

Fig. 10 – Conic gradient with extra color transition.

You don't have to stop with three colors, of course. For example, if we add some more colors of the rainbow, then we easily get a full color palette.

1
2
3
4
#conic-palette {
  border-radius: 100px;
  background-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}

Fig. 11 – Using a conic gradient to create a color palette.

#conic

#conic-smooth

#conic-palette

Fig. 12 – CSS conic gradients, results from the above examples.

Repetitions

We can also repeat linear and radial transitions using CSS. For this we use repeating-linear-gradient and repeating-radial-gradient. Some examples:

1
2
3
4
5
6
7
#repeat-linear {
  background-image: repeating-linear-gradient(-45deg, #ce0000, #ffffff 10px, #cd42ab 10px, #00ce00 20px);
}

#repeat-radial {
  background-image: repeating-radial-gradient(circle at 25% 10%, #ce0000, #ffffff 10px, #cd42ab 10px, #00ce00 20px);
}

Fig. 13 – Repetitions in gradients.

#repeat-linear

#repeat-radial

Fig. 14 – CSS repeating gradients, results of the above examples.

Nice tricks

Now that we've mastered the basics – and even a little more than that – we can apply some neat tricks. This blog post was entitled "Fun with CSS gradients" for a good reason.

A first trick is to make a chessboard pattern or flannel shirt through repetitions, for example.

1
2
3
4
5
6
7
8
9
#chess {
  width: 240px;
  height: 240px;
  background-color: #eee;
  background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
  linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
}

Fig. 15 – Using CSS gradients to make a chessboard.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#flannel {
  width: 240px;
  height: 240px;
  background-color: hsl(34, 53%, 82%);
  background-image: repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,
    hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
    hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,
    hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
    hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
    hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px
    ),
  repeating-linear-gradient(135deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,
    hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
    hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,
    hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
    hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
    hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px
  );
}

Fig. 16 – Using CSS gradients to make a flannel shirt.

Fig. 17 – CSS patterns: chessboard and flannel shirt.

A second trick is to also give borders a gradient.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.gradient-border {
  width: 200px;
  background-image: linear-gradient(60deg, #ce0000, #00ce00);
  border-radius: 16px;
  padding: 10px;
}

.content-wrapper {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
  padding: 35px;
  text-align: center;
}

Fig. 18 – Using CSS gradients as a border.

Lorem ipsum

Fig. 19 – Using CSS gradients as a border (result).

Animations

You could even add animations and create a sunrise. Below, move your cursor over the sea and the sky to see the result.

Fig. 20 – A sunrise made with CSS gradients.