It’s okay if you don’t know a lot about CSS gradients. To someone new to CSS they can be daunting. Even as someone with 5+ years of development experience, I was a bit intimidated by gradients when I started learning CSS.
The thing is, if you’re doing any sort of web development, you absolutely should be using CSS gradients. They are extremely powerful, and can help you in a number of different ways.
Gradients are Beautiful
The most common usage of CSS gradients is as a dynamic, colorful background. They can do some pretty amazing things, all with pure CSS. If you haven’t already you should check out some of the examples at Gradient Magic.
Gradients are Practical
What most people don’t know is that CSS gradients can be used as way more than just a pretty background. You can use them to color text, in buttons, for cool text effects, and much more. Even the very blocky looking decoration bar at the top of this blog is, you guessed it, a gradient.
Easier Than Images
Wait, can’t an image do all of those things above? Yes, but images take more time and effort to work with. They need to live somewhere, be linked too, and be sized correctly. CSS Gradients live in your CSS file (or even in the HTML) and require no work to size correctly (in most cases).
Tweaking an image to get it “just right” can be a painful process of editing in photoshop, re-uploading, and refreshing. CSS gradients can be edited in your browser!
Smaller than Images
Being easier to work with wouldn’t mean a lot if they also didn’t give a better user experience. CSS Gradients are usually much smaller than an image showing the same effect. Since they are included in your CSS, that’s also one less request to the server. All of this means your page will load faster. Depending on the image this could be a huge boost, or just a small one. Either way, it’s worth trying.
It’s 2019. All major browsers support CSS gradients, and you don’t need to use vendor prefixes (unless you need to support early versions of android and iOS).
Easy to Use
You don’t need to know anything about how they are constructed (although it can help). All you need to do is copy the CSS, put it in a “background” tag, and pat yourself on the back.