# 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

*help_outline*

```
.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

*help_outline*

```
.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

*help_outline*

```
.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

*help_outline*

```
.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

*help_outline*

```
.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

*help_outline*

```
.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

*help_outline*

```
.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

*help_outline*

```
.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

*help_outline*

```
.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

*help_outline*

```
.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

*help_outline*

```
.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

*help_outline*

```
.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

*help_outline*

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

Here is an attractive example that has alternating lines.

Gradient

*help_outline*

```
.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

*help_outline*

```
.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

*help_outline*

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

Here is an example of an attractive repeating radial gradient.

Gradient

*help_outline*

```
.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.