A practical guide on linear-gradients - CSS
Tags: css, html, frontend
Published: 2019-11-10 02:50:14

Linear gradients are identified by using the `linear-gradient()` function within the `background` or `background-image` property. It must include (at least) two color values.

Before any gradient backgrounds are identified, it's good to put in a default `background` property with a solid color. The solid color is to be used as a fallback should a browser not support gradient backgrounds.

## **Varying the gradient angle**

By default, the gradient goes from the top of the block to the bottom. It is equivalent to writing this:

```CSS

    div {
        background-image: linear-gradient(to bottom, rgb(100, 100, 100), rgb(200, 200, 200));
    }

```

You can use the keywords `to top`, `to bottom`, `to left`, `to right`, `to top left`, `to top right`, `to bottom left` and `to bottom right` to change the angle or direction of the gradient

<!-- Codepen goes here -->
{% codepen https://codepen.io/obinnaogbonnajoseph/pen/GRRGbJJ %}

Another way to set gradient angles is through a degree value.

```CSS

    div {
        background-image: linear-gradient(0deg, rgb(100, 100, 100), rgb(200, 200, 200));
    }

```

* `0deg` is equivalent to `to top`
* `90deg` is equivalent to `to right`
* `180deg` is equivalent to `to bottom`
* `270deg` is equivalent to `to left`
* `360deg` brings you back to `to top` again.

## **Colour stops**

A color stop is a position along the gradient that has a specific color. You can specify as many colors as you like along  gradient, and the browser will calculate all the colors between those stops.

This

```CSS

    div {
        background-image: linear-gradient(to bottom right, rgb(255, 0, 0), rgb(150, 0, 0))
    }

```

is equivalent to:

```CSS

    div {
        background-image: linear-gradient(to bottom right, rgb(255, 0, 0) 0%, rgb(150, 0, 0) 100%)
    }

```

So here we have one color stop at `0`, and one at `100%` of the way across the block the element is applied to. But there is no point writing these, as this is the default. Instead, it is a lot more useful to add color stops in between the start and end. For example:

```CSS

    div {
        background-image: linear-gradient(to bottom right, rgb(255, 0, 0),
        rgb(100, 0, 0) 50%,
        rgb(50, 0, 0) 75%,
        rgb(150, 0, 0));
    }

```

Here we are starting with a really light red, then going to a darker red at 50%, an even darker one at 75%, and then a slightly lighter one at 100%.

<!-- codepen inserted here -->
{% codepen https://codepen.io/obinnaogbonnajoseph/pen/GRRGbop %}

Instead of percentages, you can use fixed values of length like px. However, for liquid layouts, percentages are recommended because the conditions in the code remain true despite any change in width or height.

## **Transparency gradients**

You can vary the alpha channel value of the color along the gradient. For example:

```CSS

    div {
        background-image: linear-gradient(to right,
        rgba(100, 100, 100, 1),
        rgba(100, 100, 100, 0.5))
    }

```

## **Repeating linear gradients**

Instead of `linear-gradient`, you can use `repeating-linear-gradient`. This takes the color stop values and repeats them endlessly. It doesn't make much sense to do this with percentage values, but with fixed units, it can create some cool effects.

<!-- codepen inserted here -->
{% codepen https://codepen.io/obinnaogbonnajoseph/pen/MWWXMKQ %}

Here we are starting at a bright full red, moving to a darker red after `20px`, then  moving back to the full red at `40px`. Because it is a repeating gradient, it keeps repeating this pattern until the end of the block.

## **Browser support and old syntax**

For compatibility with older browser versions and WebKit versions, you should consider including vendor prefixes versions of the property, all including the older syntax. This is basically the same, except:

* The direction keywords are the opposite way round and don't include the word `to`. So `top left` is equivalent to `to bottom right`, `bottom` is equivalent to `to top`, and so on.

* When signifying angles for directions, you need to do some recalculation, as `0deg` used to mean horizontal towards the right (equivalent to `left`), and now it means vertical and upwards (equivalent to `top`).

A full cross browser block that also looks after older browser syntax would look like this:

```CSS

    div {
        background-image: -webkit-repeating-linear-gradient(20deg, rgb(255, 0, 0), rgb(100, 0, 0) 20px, rgb(255, 0, 0) 40px);
        background-image:   -moz-repeating-linear-gradient(20deg, rgb(255, 0, 0), rgb(100, 0, 0) 20px, rgb(255, 0, 0) 40px);
        background-image:       -ms-repeating-linear-gradient(20deg, rgb(255, 0, 0), rgb(100, 0, 0) 20px, rgb(255, 0, 0) 40px);
        background-image:           -o-repeating-linear-gradient(20deg, rgb(255, 0, 0), rgb(100, 0, 0) 20px, rgb(255, 0, 0) 40px);
        background-image:               repeating-linear-gradient(70deg, rgb(255, 0, 0), rgb(100, 0, 0) 20px, rgb(255, 0, 0) 40px);
    }

```