A practical guide on linear-gradients - CSS

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:

    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

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

    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

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

is equivalent to:

    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:

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

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:

    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.

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:

    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);
    }