CSS Linear Gradients

Make your websites even more aesthetic

CSS Linear Gradients

Photo by Gradienta on Unsplash

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.

1Photo 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πŸ€πŸ€πŸπŸ.

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

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;
}

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.

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

https://cssgradient.io/

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

https://uigradients.com/#CrazyOrangeI

Thanks a lot for reading this post. Now you can make your website even more beautiful. πŸ’πŸ’πŸ’πŸ’

big-g-media-3tn8kIRAvYk-unsplash.jpgPhoto by Big G Media on Unsplash

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

Subscribe to our newsletter

Read articles from Raghav Singh Gulia's Blog directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Did you find this article valuable?

Support Raghav Singh Gulia's Blog by becoming a sponsor. Any amount is appreciated!