DEV Community

Cover image for Explanation of CSS Gradients
Parsa Frahani
Parsa Frahani

Posted on

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:

Image description

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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:

Image description

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);
Enter fullscreen mode Exit fullscreen mode

Now our div looks like this:

Image description

You can also add multiple colors:

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

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%);
Enter fullscreen mode Exit fullscreen mode

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:

Image description
Or specify the start & the end percentage like this:

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

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:

Image description
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%
  );
Enter fullscreen mode Exit fullscreen mode

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

Image description

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);
Enter fullscreen mode Exit fullscreen mode

Now we have this:

Image description
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);
Enter fullscreen mode Exit fullscreen mode

And this is what we have:

Image description
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%
  );
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

We will have this:

Image description
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
  );
Enter fullscreen mode Exit fullscreen mode

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

Image description

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🙏.

Top comments (0)