CSS Linear Gradients

Gradients are one of the most famous design trends nowadays. Linear gradients are one of the most used gradients nowadays. So let's learn about linear gradients.

What are gradients?

Photo by Sharon Pittaway on Unsplash

Gradients are just like moving colors. For example: In a leaf, there are many colors, not just a single one🍀🍀🍁🍁.

Why use gradients?

First, gradients feel a lot more natural than normal still colors. And second, they provide an aesthetic look to our website🎨🎨.

Your first gradient

The boilerplate

First, we have to make an HTML and CSS file.

In the HTML file, we just need to have the boilerplate code. In the CSS, let's select the body and make its height 100vh.

body {
    height: 100vh;
}

The fun part 🐱‍🏍🐱‍🏍

In the body, write the following code:

body {
  height: 100vh;
  background-image: linear-gradient(#ff0, #0ff);
}

Here, we are making a gradient of the colors #ff0(yellow) and #0ff(cyan).

We can also change the direction by specifying it:

body {
  height: 100vh;
  background-image: linear-gradient(to right bottom, #ff0, #0ff);
}

We can also use angles like 45deg, 90deg, etc. instead of to right bottom, to right.

Some advanced concepts

In gradients, we can also specify when to start and when to stop. We can also create solid gradients. Let's first take a look at this Codepen:

Here, we are starting with orange when the gradient is 33.3%(1/3) complete. Then we continue the gradient with the color white which starts at 33.3% and we again make it start at 66.6%(2/3). Then, we just start green on 66.6% and end it.

Note: It will automatically start from the first color and end on the last color

Some tools

https://cssgradient.io/

https://learnui.design/tools/gradient-generator.html

https://uigradients.com/#CrazyOrangeI

Thanks a lot!

Thanks a lot for reading this post. Now you can make your website even more beautiful. 💐💐💐💐

Happy Republic Day

Photo by Big G Media on Unsplash

If you are from India, I wish you a Happy Republic Day!!!