How to add a gradient background color

There are three different gradient types – linear, radial and conic. Gradient backgrounds consist of minimum two colors…

background-image: type(direction, color1, color2, ...);

First we have to choose the type – linear, radial or conic. Next we need to choose the direction. This could be left to right, top to bottom, 45deg (degree) etc. The last step is to define the colors we need.

background-image: linear-gradient(90deg, #6d1677, #000000);

In this example we have chosen a linear gradient turned 90 degrees with colors purple to black.

We could also add a third color making it transform from purple to black and back to purple like this…

background-image: linear-gradient(90deg, #6d1677, #000000, #6d1677);

  Written by: Michael from     25-10-2022     Written in: CSS tutorials

Leave a Reply

Your email address will not be published.