A Quick Intro To Linear Gradients In CSS!
A lot of popular websites have basic white backgrounds.
It’s fairly easy to use and offers most websites a very clean and professional look.
If the website is very nice, they may even have a dark mode so you can change it up every now and again, but this still feels a little boring to me.
I tried changing the background colours to bring some positivity to my websites, but it simply made them appear outdated and boring.
This changed when I discovered the linear gradient function in CSS.
The feature works by allowing us to mix colours together to produce unique patterns that would not be possible with regular solid colour themes.
To introduce this stunning effect to the background of our website, we can go to our body class within our CSS and target the background, then add our linear gradient, and finally the colors that we seek.
.body{
background: linear-gradient(red,blue,purple)
}If we wish to add some depth to it, we can do so by adding angles, among other things.
.body{
background: linear-gradient(45deg,red,blue,purple)
}With only these lines of code, we can greatly enhance the aesthetic attractiveness of our website themes.
As you improve, we may be using more colours and more tricky angles, among other things, to make something truly unique.
If you are short on time and don’t want to waste it figuring things out, there is a website that will handle all of the heavy liftings for you.
CSS Gradient is a website that offers a variety of pre-built linear-gradient backgrounds!
All you have to do is copy the CSS and paste it into your code to see the effects right away.
Great for enhancing the look of your websites while also saving time, ultimately killing two birds with one stone.
Just go to the background page for a bonus; you’ll be surprised to see shortcuts to the top gradient-generating websites.
Well, that’s the end of the intro, We will meet in my next post.
Just hit the follow button for now 😉!
