Gradients

CSS gradients are great tools to use for backgrounds. They allow you to smoothly transition from one color to others. There are 4 types of gradients: linear-gradient(), radial-gradient(), repeating-linear-gradient() and repeating-radial-gradient(). You can sort of guess what each of them will do but you’ll have a chance to see it more visually later in this playground.

Linear Gradient

First we’ll cover linear gradients which is the easiest gradient to use. In order to use it, we need to use the CSS function linear-gradient() and give it some values. There are many ways to declare a linear gradient but the easiest is with 2 color values.

You can use the widget below to play around. The widget uses 2 hexadecimal RGB color values to apply a linear gradient.

Gradient

.gradient { background: linear-gradient(#C1D279, #4062BF); }

We also can declare linear-gradient() but specify its direction. If we had a background of linear-gradient(to right, red, green), that means we start at the color of red but as the gradient moves to right, it fades into the green color.

Gradient

.gradient { background: linear-gradient(to top, #D27D79, #50BF40); }

linear-gradient() also works if you specify a corner direction. If we had a background of linear-gradient(to top right, red, green), that means we start at the color of red but as the gradient moves to top right, it fades into the green color.

Gradient

.gradient { background: linear-gradient(to top right, #D27D79, #50BF40); }

If those examples above are too restricting, you could apply a linear-gradient() with an angle that represents the gradient direction. This angle can be any valid angle type like deg, rad or turn.

Gradient

.gradient { background: linear-gradient(0deg, #C1D279, #4062BF); }

Declaring a gradient with a multitude of colors will add all of the colors into the gradient. All of the colors will be evenly spaced.

Gradient

.gradient { background: linear-gradient(#D27979, #D2D279, #81D279, #79CFD2); }

In the example before, what if we wanted some gradients to be larger than others? We can declare color stops for each gradient to specify their size. This means placing a length value after the color that represents the distance from the gradients starting position.

A value of linear-gradient(red, yellow 20px, green 40px, teal) means that we have a gradient of 4 colors but the yellow and green colors are positioned differently. The yellow gradient will start at 20px from the beginning of the gradient (top in this case) and the green gradient will start at 40px from the beginning of the gradient.

Gradient

.gradient { background: linear-gradient(red, yellow 20px, green 40px, teal); }

Radial Gradients

Radial gradients are similar to linear gradients except that they radiate color outwards from a single point.

Lets start with just a simple radial gradient with 2 colors. The first color radiates outward into the second color.

Gradient

.gradient { background: radial-gradient(#D29A79, #797BD2); }

By default, radial gradients try to fill the element they’re in as much as they can. This results in elliptical gradients in rectangular elements and circular gradients in square elements. We can declare radial-gradient() and also specify the shape of the gradient.

The type of radial gradient (whether it’s circle or ellipse) can be declared as well as its distance: farthest-corner or closest-side.

Gradient

.gradient { background: radial-gradient(circle farthest-corner, #79D2BC, #CF79D2); }

The type of gradient can be specified along with its starting position like: top or left.

Gradient

.gradient { background: radial-gradient(circle at top, #40BFA5, #BB40BF); }

Radial gradients can start at corners when given values like top right and bottom left.

Gradient

.gradient { background: radial-gradient(circle at top left, #D29B79, #797CD2); }

For more specific radial gradients, the starting position can be positioned by providing its x and y position.

Gradient

.gradient { background: radial-gradient(circle at 10px 10px, #D29B79, #797CD2); }

Just like with linear-gradient() you can also have color stops to space out each color.

Gradient

.gradient { background: radial-gradient(circle farthest-corner, #81C784 40px, #E57373 80px); }

Repeating Linear Gradients

repeating-linear-gradient() can be used for linear gradients that repeat in a straight line. These gradients take the same parameters as linear-gradient() but will just repeat infinitely.

Gradient

.gradient { background: repeating-linear-gradient(0deg, #1D4D19, #191A4D 10px); }

Here is an attractive example that has alternating lines.

Gradient

.gradient { background: repeating-linear-gradient(45deg, #7986CB, #7986CB 5px, #AED581 5px, #AED581 10px); }

Repeating Radial Gradients

repeating-radial-gradient() repeats a gradient outward from a center position. These gradients take the same parameters as radial-gradient() but continuously repeat patterns.

Gradient

.gradient { background: repeating-radial-gradient(#1D4D19, #191A4D 10px); }

Very similarly to radial-gradient, you can customize the shape of the circles and its origin.

Gradient

.gradient { background: repeating-radial-gradient(circle at 10px 10px, #194D4D 10px, #4D1919 20px); }

Here is an example of an attractive repeating radial gradient.

Gradient

.gradient { background: repeating-radial-gradient(circle, #7DD279, #7DD279 5px, #7F79D2 5px, #7F79D2 10px); }

Conclusion

Holy crap that was a lot. Writing out all of this definitely took a while but I hope this sheds more light on the many different ways you can declare gradients in CSS.

If you’re interested in further reading, here is an article about CSS gradients by MDN CSS Gradients.

HTML
CSS
Output