Linear gradients

In this tutorial you will learn how to add a linear gradient background to a div. A linear gradient is where one colour gradually changes into another colour.

A linear gradient can change colours gradually from left to right, right to left, top to bottom, or the bottom to top of a div. A gradient involves at least two different colours but can include multiple colours. Below is an example of a linear gradient with three colours.


Make sure you use colours that work well together and that work well with the rest of the theme on your website. Using different shades of a colour for a gradient can be used to give a div a little depth or a nice shadow effect if used effectively.

Watch the video below to see how to create linear gradients and then scroll down to see the sample HTML and CSS code.

Here is the sample HTML code:

        <title>Linear gradients</title>
        <link rel="stylesheet" href="theme.css" type="text/css"/>

        <div class="gradient">

Here is the sample CSS code:

    width: 100px;
    height: 100px;
    background-image:linear-gradient(to bottom, #311b92, #7e57c2, #ede7f6);