Websites that respond to size of device

Why I Like CSS Gradients

Published: 05/27/2014

There are a lot of different parts that have to come together in order to build a website. Each part performs an important function when it comes to the overall performance of the website, but my favorite part is CSS. CSS (Cascading Style Sheets) is the portion that makes a website more than a word document. Without "styling" the content of the pages, you get very bland, basic formatting that isn't very appealing. There have been a lot of modifications and advancements in CSS over the years, and we're currently working with CSS3 (version 3). With each new version, CSS becomes more powerful.


One of my favorite parts about CSS3 is gradients. To understand why I like CSS gradients, I'll need to give a small demonstration. Below you'll see two blue boxes. The box on the left is a gradient created in Photoshop CC and then saved as a .jpg at medium quality; the box on the right is the same gradient, just done with CSS.

JPG (Image)
CSS (Gradient)

If you look closely at the box on the left, you'll notice horizontal lines running across. If you have a high-resolution monitor, you won't have to look very closely to see them. You won't find lines like that in the box on the right. The transition between the colors is smoother, and in the end, just looks better.


The box on the left is actually a pretty small file size, just about 2KB, so by itself it's not a big deal. The box was saved at medium quality, but even at maximum quality (with a monitor running in HD), you will still see those lines running horizontally across the image. The file size at high quality is 7KB, again not all that big. But let's imagine that we want this gradient to run the full width of the website as a background for the navigation. In order for the gradient to cover that space, it will need to be loaded on the page (side by side) about seven times. In this case, it's not really just 2KB anymore; it's more like 14KB (or 49KB at maximum quality). Again, this is still pretty small, but we have to remember that we will have a lot of other images that need to be loaded on the site as well. It all adds up and can really start to make a website load slowly.


The idea here is to limit the amount of data that needs to be transmitted over your internet connection. Images take up much more space than text (code lines), which means it will take longer to load through your connection if there are more images. With CSS gradients, your browser reads the code lines and displays the colors in the gradient. Not only is this more efficient, but it also looks better.


In order to keep websites loading quickly and looking great, I use CSS gradients whenever possible instead of using an image of the gradient created by the designers. It may seem like a small step, but each step gets you closer to your goal, and in this case, the goal is to keep the sites looking great and loading quickly.


Author: Brice Wilson
Position: Front End Developer
Brice Wilson works at Business Promotion as a Front End Developer. In his free time, he likes playing soccer, rock climbing, and binge reading.

comments powered by Disqus