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 Beginnrtuts.com 25-10-2022 Written in: CSS tutorials