CSS Did You Know? - October 26th, 2012

Wondering what all this fuss about the addition of CSS gradients is about? Well, look no further, as the following article will try to provide you with an answer!

Before all the action starts, here's some general info though: The added CSS gradients (or, specifically speaking, CSS linear gradients) are an addition of CSS values, meaning that you can use them in properties you already knew before. In this case, those properties are background and background-image, so where you used to put colors or image URLs, you now have the possibility to insert gradients as well! How those gradients work in detail will be described in the following…

Basic (two-color) syntax

First off, CSS gradients are quite an extensive feature and offer many customization options. In 99% of the cases, you won't need all of those though, which is why I've created a basic explanation to get started. If you want to know everything, you'll find the advanced description below.

linear-gradient(<direction>, <start-color>, <end-color>);

• <direction> — The direction the gradient originates from (it will then move towards the opposite direction). Use top, bottom, left or right.
• <start-color> — The color the gradient starts with.
• <end-color> — The color the gradient ends with.

Here's an example of the above syntax in action. We'll be creating a box with a gradient running from top to bottom with the colors yellow to red:

Advanced syntax

linear-gradient(<direction|angle>, <color> <percentage>, <color> <percentage>, [...], <color> <percentage>);

• <direction|angle> — Pretty similar to the <direction> property in the simple version, except that you can also use specific angles such as 45deg, 10deg or -60deg.
• <color> <percentage> — This pair of properties is a so-called stop, which describes a certain point and color within the gradient.
  • <color> — The color of the current stop.
  • <percentage> — The position of the current stop within the gradient in percent (%). If you leave percentages out (which you can), the colors will be evenly distributed across the gradient.
• [...] — You can add as many stops to the gradient as you like.

Looks confusing? Here's another example to clear things up. This time, we'll be creating a box with a gradient starting at -45 degrees and containing multiple colors placed at 0%, 40%, 60%, 80% and 100%:

Hands-on examples

Although the above examples may have been helpful to understand the code's syntax, they're admittedly not very good examples of how CSS gradients can be used in real designs. I mean, there's no way someone will use such an extremely obtrusive red-yellow-pink-turquoise-blue box in a Journal skin. Therefore, here are two hands-on examples of how gradients can be effectively utilized to polish your designs.

Stylizing (text) boxes

We'll start with this box:




Pretty simple, right? Now let's use CSS gradients to make the whole thing look a little more interesting:




This is a great example of one of the main advantages CSS gradients offer. Theoretically, you could also implement that background gradient by using an image, but that image wouldn't stretch between the top and bottom of the element. So unless you exactly knew the height of it (which is highly unlikely as it can vary depending on browser, font and screen size), the image could easily be too short or be cut off at the bottom. CSS gradients, however, always stretch between the boundaries of an element, so you won't ever have that problem!

Anyway, let's add a few more minor properties like shadows and rounded corners to finish up our text box:





Addding some "pop" to buttons

Once again, we'll start off with a really simple object, a plain button:



I'm a button!

Guess what: it's gradient time!



I'm a button!

We'll give some finishing touches to this as well by adding borders and shadows:



I'm a button!

Want to start of smaller? ColorZilla's Gradient Editor is a great way to practice and see how CSS gradients work. A big thank you to electricjonny for sharing.

Conclusion

I hope to have given you an insight on how the new CSS gradients work and that you'll be able to make use of them in your own designs. If you have any further questions, feel free to ask! If you'd like to know about some of the possibly a little obscure stuff I did in the third steps of the above examples, let me know and I'll consider writing another tutorial!

CSS will be difficult when you're unfamiliar to it. So that's why we're writing these articles! If you have any suggestions or would like to write a section in future CSS Did You Know? articles, please note bradleysays.

If you write a section for us, you will be credited!