Ultimate Guide to CSS Gradients
Tags: css, tutorial, webdev, design
Published: 2020-12-29 18:57:02

Gradients are back.

They are bold, eye-catching, and playful. When used correctly they can breathe life into a drab and lifeless design.

In this article, I'll show you how to create gradients in CSS, so you can make your websites stand out.

## What this article is about

This article aims to explain both the syntax and concepts behind CSS gradients. Topics covered include:

- Linear & Radial gradient syntax
- What are color stops?
- Changing the direction of linear gradients
- How CSS angles work?
- Changing the size, shape & position of radial gradients

But first, let's get one thing out of the way…

## Gradients are Images in CSS

For this reason, we need to set gradients as a `background-image`. You might think it's obvious, but I had trouble remembering that at first.

I used to try and set gradients as `background-color` all the time. If you have trouble remembering this like me, use the [background shorthand](https://dev.to/hadrysmateusz/the-fastest-way-to-set-css-backgrounds-3m2j). 

{% link https://dev.to/hadrysmateusz/the-fastest-way-to-set-css-backgrounds-3m2j %}

It lets us use the same property for colors and images. Including gradients.

# Linear Gradients

A linear gradient is made up of two basic components: direction and color-stops.

![Linear gradient structure](https://dev-to-uploads.s3.amazonaws.com/i/9kzoiwd1r9rasaay6g9u.png)

## Color Stops

Color stops define what colors make up the gradient and optionally, where to put them.

We can add as many color stops as we want. By default, they'll be spaced evenly along the gradient line.

![Default distribution of multiple color stops](https://dev-to-uploads.s3.amazonaws.com/i/4b28kw8muor8eps5hrp8.gif)

Color stops also allow us to set the starting position of each color manually. We do so by adding a percentage  (with `0%` being the start of the gradient and `100%` its end ) after the color.

```css
/* The GIF below animates between these 3 gradients */
background: linear-gradient(yellow, red 10%, blue);
background: linear-gradient(yellow, red 50%, blue);
background: linear-gradient(yellow, red 90%, blue);
```

![Gradient with 3 color stops, where the middle color stop animates between 3 positions](https://dev-to-uploads.s3.amazonaws.com/i/ay8wtxkpe5igx0v28v7v.gif)

We can also set an ending position for a color, if we want a color to take up more space.

```css
background: linear-gradient(yellow, red 25% 75%, blue);
```

![Gradient with 3 color stops, where the middle color stop spans from 25% to 75% of the gradient line](https://dev-to-uploads.s3.amazonaws.com/i/tvfg1izzsbto45xod0nd.png)

Here are a few examples of manually positioned color stops

```css
/* Automatic Positions */
background: linear-gradient(lightpink, crimson, indigo);

/* Manual Starting Positions */
background: linear-gradient(lightpink 40%, crimson 50%, indigo 60%);

/* Manual Starting & Ending Positions */
background: linear-gradient(lightpink 0% 20%, crimson 35% 65%, indigo 80% 100%);
```

![3 gradients with 3 color stops each, where the first one is a smooth transition between all, the second has the middle color stop as a thin line in the middle, and the third has the middle color spanning the majority of the gradient area](https://dev-to-uploads.s3.amazonaws.com/i/p6fegzo3b985zovafenj.png)

##  Direction

By default, a gradient goes from top to bottom.

```css
background: linear-gradient(yellow, red);
```

![a gradient with yellow on top and red at the bottom](https://dev-to-uploads.s3.amazonaws.com/i/5xkali1yml4gltb2g7lb.png)

To get a gradient going from one side to the opposite side, write `to *`, where `*` is one of four keywords: `top`, `bottom`, `left`, and `right`.

For example: `to left` gives us a right-to-left gradient.

![4 boxes showing gradients going to four sides](https://dev-to-uploads.s3.amazonaws.com/i/znxxbgnq7ssozj6q8uaq.png)

By using two keywords, we get a gradient going from one corner to the opposite corner.

For example: `to bottom right` gives us a gradient going from the top-left to the bottom-right corner.

![4 boxes showing gradients going to four corners](https://dev-to-uploads.s3.amazonaws.com/i/k8lj8yfjobdigu6rbbxs.png)

If you need more precision than side-to-side or corner-to-corner, you can specify a custom angle.

### CSS Angles

There are four different [angle units](https://developer.mozilla.org/en-US/docs/Web/CSS/angle#Units) in CSS, but we're only going to focus on two: degrees `deg` and turns `turn`.

**Degrees** - a value from 0 to 360 with a `deg` unit, where `0deg` = `to top`, `90deg` = `to right`, etc.

```css
background: linear-gradient(150deg, yellow, red);
```

![150 degree gradient](https://dev-to-uploads.s3.amazonaws.com/i/gs7uwlu7yutbmxjp925h.png)

**Turns** are exactly what they sound like: 360 degree turns. This means that: `0.5turn` = `180deg`, `0.25turn` = `90deg`, etc.

There's one thing you need to remember. CSS angles work differently than the ones you remember from school. They resemble a clock. Starting at the top and going clockwise.

![animation showing how a gradient looks for every angle](https://dev-to-uploads.s3.amazonaws.com/i/lfcbfheooqd4x8h1zq57.gif)

*The gradient's direction is indicated by the spinning arm. The corresponding angle in degrees is shown in the center.*

### Negative Angles

An angle can also be a negative number, like: `-90deg` or `-0.25turn`. Negative values represent counter-clockwise angles. So for example `-45deg` is the same as `315deg`. 

{% twitter 1341791778521948161 %}

# Radial Gradients

Radial gradients are different from linear gradients in one important way. Instead of progressing in a straight line, the colors radiate outwards from a single point.

![radial gradient structure](https://dev-to-uploads.s3.amazonaws.com/i/hox3hw7thltaij91cdly.png)

The area of a radial gradient is defined by the origin point's **position**, the ending **shape**, and its **size**.

![default gradient area](https://dev-to-uploads.s3.amazonaws.com/i/u41uak26bquufr4ez55j.png)

Let's look at these three components in more detail.

### Position

By default, the origin point is in the center of the element. We can change that by writing `at *`, where `*` is one or two length or percentage values indicating the origin point's coordinates.

```css
/* These two declarations do the same */
background: radial-gradient(at 100% 100%, yellow, red);
background: radial-gradient(at bottom right, yellow, red);
```

![radial gradient starting in the bottom right corner](https://dev-to-uploads.s3.amazonaws.com/i/86sheqccgxoxf25zirmg.png)

```css
background: radial-gradient(at 20% 70%, yellow, red);
```

![radial gradient starting near the bottom left corner](https://dev-to-uploads.s3.amazonaws.com/i/ub7uqhskeja867xpwii1.png)

Setting the origin's position works exactly like the `background-position` property. You can read more about it in the article below.

{% link https://dev.to/hadrysmateusz/learn-all-8-background-css-properties-in-5-minutes-2lk4 %}

### Shape

By default, the gradient spans the entire area of the element. This means that if the element is not a square, the gradient will stretch and become an ellipse.

If we want the gradient to stay a circle - regardless of the container's proportions - we need to set the gradient's shape to `circle`.

```css
background: radial-gradient(circle, yellow, red);
```

![animation showing how circle and ellipse gradients change when the element's proportions change](https://dev-to-uploads.s3.amazonaws.com/i/ogjcgtq5v74vijwhv7dp.gif)

*color-stop positions are adjusted in this example to better illustrate the differences*

### Size

The ending shape's size is defined by where its edge meets the element.

Which part of the element? That can be set with one of four keywords: `closest-side`, `closest-corner`, `farthest-side`, and `farthest-corner`.

You can see all size & shape combinations below. The gradient area is marked using light ellipses and circles, and the 0% and 100% points are marked with a dark arrow.

![a table showing all combinations of size & shapes](https://dev-to-uploads.s3.amazonaws.com/i/zd5hfz2cnqmpwsgblfuw.gif)

*Even though farthest-corner and closest-corner might look identical, they produce very different results when the origin position is not in the center.*

We can also specify an absolute value for the ending shape's size, using a length value (radius) in case of circles and two percentages (horizontal and vertical radius) in case of an ellipse.

### Putting it all together

We can combine changing the shape, size, and position. All three values make up the first parameter of `radial-gradient()`. That's why we only put one comma after them.

```css
background: radial-gradient(circle closest-side at bottom right, yellow, red);
```

All three values are optional and default to: `ellipse farthest-corner at center center`.

Here are a few examples of radial gradients, for you to get used to the syntax:

```css
/* A */
background: radial-gradient(lightpink, crimson, indigo);
/* B */
background: radial-gradient(closest-side, lightpink, crimson, indigo);
/* C */
background: radial-gradient(closest-side at 40% 65%, lightpink, crimson, indigo);
```

![3 elliptical gradients](https://dev-to-uploads.s3.amazonaws.com/i/io9mvrf6scf6cdc4bbsu.png)

```css
/* D */
background: radial-gradient(circle, lightpink, crimson, indigo);
/* E */
background: radial-gradient(circle closest-side, lightpink, crimson, indigo);
/* F */
background: radial-gradient(circle 120px at 30% 75%, lightpink, crimson, indigo);
```

![3 circular gradients](https://dev-to-uploads.s3.amazonaws.com/i/c5068geyjc6v2lehsxmw.png)

This should be enough to craft almost any gradient you want. 

A few more advanced bits of info as well as conic and repeating gradients will be discussed in part 2. [Follow me on Twitter](https://twitter.com/HadrysMateusz) to be notified when it's released.

*Thanks for reading. I hope you learned something useful. If you have any questions, ask in the comments. Follow me for more web development tips.*

---

### Some other articles you might enjoy

- [Create Gradient Text in CSS](https://dev.to/hadrysmateusz/gradient-text-in-css-38g6) 🌈

- [Easy Custom List Styles with Modern CSS](https://dev.to/hadrysmateusz/custom-list-styles-using-marker-before-4gi4) 🎨

- [Full Text Styling with a Single Line of CSS](https://dev.to/hadrysmateusz/full-text-styling-with-a-single-line-of-css-3kbd) ✍