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


  • Olivia says:

    Gradient backgrounds are great. I can recommend learning this if you develop a website.

  • Evan says:

    This tutorial was incredibly helpful! I’ve always wanted to know how to add a gradient background color to my website, and this step-by-step guide made it so easy to understand . The explanations were clear, and the screenshots were a nice touch to visually guide me through the process. Now my website looks so much more vibrant and professional. Thank you for sharing such valuable content!

  • Gavin says:

    This tutorial was so helpful! I’ve always wanted to add a gradient background color to my website, but I had no idea where to start . The step-by-step instructions made it super easy to follow along, and the screenshots really helped me understand what each code snippet was doing. I can’t wait to experiment with different gradients now and make my website look even more stylish. Thank you so much for sharing this tutorial!

Leave a Reply

Your email address will not be published. Required fields are marked *