Explanation of CSS Gradients

You may ask yourself what is the difference between linear-gradient, radial-gradient & conic-gradient as they sound so confusing, but not after reading this blog!
In this blog, I'm going to explain the differences between these three gradients and how you can use them like a pro-CSS writer. so let's dive in.

1- Set Up Our Project

Before anything let's make our project and then work on it. so here I have an HTML & CSS file as you can see:

this is my simple HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="./style.css" rel="stylesheet" />
    <title>Gradients</title>
  </head>
  <body>
    <div class="container">
      <h1>Hello World</h1>
      <div class="tester"></div>
    </div>
  </body>
</html>

and CSS:

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

body {
  background-color: #333;
  overflow-x: hidden;
  font-family: "Poppins", sans-serif;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 90vh;
  width: 100vw;
}

.container h1 {
  color: white;
  font-weight: 400;
}

.tester {
  width: 10rem;
  height: 10rem;
  background-color: rgb(0, 208, 255);
  border-radius: 1rem;
}

Our goal is to style the taster div and try different gradients on it.
Well done, now we set up our project let me explain the first gradient.

2- Linear Gradient

As you may know for giving all the gradients you have to use background-image like here:

  background-image: linear-gradient(red, blue);

Now we are giving linear gradient to our taster div. linear-gradient will get two colors minimum and you can specify where the color should start or even how many degrees should it be. now our taster div looks like this:

Now I use to right, to left, to bottom, to top to specify where should the color start as I said.

  background-image: linear-gradient(to right, red, blue);

Now our div looks like this:

You can also add multiple colors:

  background-image: linear-gradient(to right, red, blue, green, yellow);

You can even give it a Percentage after the colors to say it should cover X% of the div.

  background-image: linear-gradient(to right, red 10%, blue 20%);

Now we are saying that from 0% to 10% should be red & after that from 20% to the end of the div (100%) should be blue. like this:

Or specify the start & the end percentage like this:

  background-image: linear-gradient(to right, red 0% 10%, blue 50% 100%);

Here the red color will start from 0% to 20% & blue will start from 50% & end in 100%. this gap between red & blue will fill with the transition that they have:

It's obvious that if you give the colors no space for transition they will just stick together. like this example:

  background-image: linear-gradient(
    to right,
    red 0% 10%,
    blue 10% 50%,
    green 50% 100%
  );

This code has no gap between the colors so it will be like this:

3- Radial Gradient

In radial-gradient the colors will start from the center of the page in the form of a circle & you can add colors to it. let's try it out:

  background-image: radial-gradient(red, blue);

Now we have this:

Exactly like linear that we had t*o bottom, **to top, ... in here we have **circle, **circle at bottom* or even** circle at bottom left**. It will give our colors a better circle shape:

  background-image: radial-gradient(circle, red, blue);

And this is what we have:

And you can give them percentages as well exactly like before:

  background-image: radial-gradient(
    circle at bottom left,
    red 0% 20%,
    blue 50% 100%
  );

That's it for radial gradients. let's move on to the next one.

4- Conic Gradient

In the conic gradient the colors rotate around a center on the page. for example with this line of code:

  background-image: conic-gradient(red, blue);

We will have this:

You can add more colors and it will add them clockwise or you can give them degrees like before.

Repeating Gradient's

As the name says it will repeat the linear, radial or conic gradient. here is an example of it:

  background-image: repeating-linear-gradient(
    red 50px,
    blue 50px 100px,
    red 100px 150px
  );

With this code we have this repeating blue & red gradient:

Final Thoughts

Great job! You've learned all about gradients and now you can use them like a CSS expert. With these skills, you can make your websites more colorful and attractive. you can read more in MDN website.

If you found this blog helpful let me know in the comments🙏.

Blog