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

style

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

Color 1

Color 2

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.

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.

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.

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

style

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

Color

Color

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.