Linear gradients

Web Design with HTML & CSS

🕑 This lesson will take about 5 minutes

In this lesson, you will learn how to use a linear gradient for a background. 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 as the background for a div.

Example of linear gradient background changing from dark purple, to light purple, to white.

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 and CSS code:

Here is another example of a linear gradient, however the CSS code in this example also specifies:

  • angle of the gradient (164 degrees in this example)

  • rgba values for the colours (rgba stands for red, green, blue, and alpha, where the alpha channel specifies the opacity for the colour - it can be a value between 0 and 1. For example, 0.5 would be 50% opacity).

  • the % values (eg. 0%, 50%, and 100%) specify where each colour is positioned in the gradient - you can make a colour occupy more or less of the gradient by changing the positions of the colours