CSS Linear Gradients
Make your websites even more aesthetic
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.
PermalinkWhat are gradients?
Gradients are just like moving colors. For example: In a leaf, there are many colors, not just a single oneππππ.
PermalinkWhy use gradients?
First, gradients feel a lot more natural than normal still colors. And second, they provide an aesthetic look to our websiteπ¨π¨.
PermalinkYour first gradient
PermalinkThe 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;
}
PermalinkThe 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
.
PermalinkSome 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
PermalinkSome tools
https://learnui.design/tools/gradient-generator.html
https://uigradients.com/#CrazyOrangeI
PermalinkThanks a lot!
Thanks a lot for reading this post. Now you can make your website even more beautiful. ππππ
PermalinkHappy Republic Day
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.