Table of Contents:

This article contains two major topics of Gradients:

Supported by:

Firefox 16+

Chrome 26+

Safari 5.1+

Internet Explorer 10+

Opera 12.1+

What are Gradients?

A color gradient, in terms of computer graphics, specifies a range of positioned colors to fill a certain region. By specifying a different color at different positions produces smooth color transitions in between the different ranges.

A linear color gradient is specified by different points with a color at each point. Colors along the path through those points are calculated and then extended across to fill the region.

Fig. 1 - Linear GradientA radial color gradient is specified as a circle that has one color in the center and another at the corners. Colors are calculated based on the distance from the center.

Fig. 2 - Radial GradientHowever with CSS3, instead of uploading gradient images to your webpage as you can see in Figures 1 & 2, you can just code the gradient right in. Since I'm more of a Visual Learner myself, I'm just going to go right ahead and start teaching as I go along with examples.

Linear-Gradients

The first topic of CSS3 I'd like to cover is one that's already available to *PremiumMembers in Journal Skins. By the way, there's a BlackBerry promotion going on, so Non Premium Members can use Journal skins from this page me.deviantart.com/journal/?edi… and test these features out as well

Vertical Gradients

This type refers to the gradient changing from top to bottom. This is the default gradient we'll see when entering the basic syntax:linear-gradient(color, color);

OUTPUT

Fig. 4

Note: For some reason, dA won't allow you to use ALL color names (ex: red, blue) in linear-gradients so I had to insert a hex value of white (ex: #FFFFFF = white) at the end. I'm only using names here so that beginners can follow easily, but it's better to use hex values or rgba (ex: rgba(255, 255, 255, 1) = white) If you DO want to use the names make sure you enter at least one hex value wherever.

Well that was easy enough! Don't you think? Good, 'cause now this is where things get a little complicated

What if I want to control the position of where the colors stop?

For that the syntax will change a bit.linear-gradient(color position, color position, etc.);Where the position is calculated in percentages. The position is usually considered as the color stop because that's where it will stop and the new gradient will start.

OUTPUT

Fig. 5In Fig. 5 you can see that white is opaque until 30% of the box and that's where it stops and starts to change its gradient from gray until it reaches black at 100% which is at the bottom of the box.

What if I want to control the direction of the vertical gradient?

Again, you'll need to add a bit more to the syntax:linear-gradient(to direction, color stop, color stop, etc.);The direction can either be starting from top or bottom depending on you!

Note: The syntax for linear-gradients has changed for the direction, where "to direction" used to just be to "direction" ex: to bottom used to be bottom. This only works in old browsers with prefixes and dA will change the syntax for you, but it's better to use the new syntax. Thanks to pikadudeno1 for pointing it out!

OUTPUT

Challenge!

As you can see, the gradients change when hovered on, and clicked on. In the snippet below, you can see that the gradient becomes lighter in opacity when hovered on, and changes from top to bottom when clicked on. This, along with some other attributes such as box-shadow, creates a nice 3D effect.

Horizontal Gradients

This type of gradient refers to the colors changing from left to right or vice versa.linear-gradient(to direction, color, color, etc.);Where direction is either left or rightOf course, you can always add the position in percentages to better suit your needs.

OUTPUT

Fig. 8

Diagonal Gradients

You can achieve this in two ways, with angles or direction:linear-gradient(to direction direction, color stop, color stop, etc);linear-gradient(angle, color stop, color stop, etc.);The angle starts at 0deg same as to bottom ↑Then goes clockwise to 45deg starting from bottom left to top right ↗ same as to top rightAt 135deg it starts from top left to bottom right ↘ same as to bottom rightAt 225deg it starts from top right to bottom left ↙ same as to bottom leftAt 315deg it starts from bottom right to top left ↖ same as to top left

OUTPUT

Note: The first color will automatically be positioned at 0% which is the center of the circle. But you can also change where you want it to start by specifying a percentage

What if I want a specific size?

If you want a circular size the syntax will be like this:radial-gradient(sizepx, color stop, color stop);If you want an oval shape the syntax will be like this:radial-gradient(widthpx heightpx, color stop, color stop);

In the following example, I made an oval shape that looks like a face with a blue background. With this CSS3 feature, you can easily create shapes and images using radial and linear gradients!

OUTPUT

Fig. 17 - Click to see Live Preview

And that's all there is to it! Link me to any interesting gradient styles you come up with through this tutorial on cssdesk.com and leave a comment if you have anymore inquiries! Thanks for reading and hope you found this useful and easy to follow!

Vendor Prefixes

You should take note to use the following prefixes in front of each CSS style property for full Browser Compatibility on non-dA webpages:Android: -webkit-Chrome: -webkit-iOS: -webkit-Safari: -webkit-Firefox: -moz-Internet Explorer: -ms-Opera: -o-

1. The CSS standard changed, so you should now be using "to <named direction>", which indicates where the direction is going (just like with angles), instead of where it starts. dA will correct the to-less form for you, but it doesn't hurt to make a habit of doing it the correct way.

2. You can actually combine two direction keywords, e.g. "to bottom right". This produces the angle where the middle of the gradient connects the two neighboring corners, e.g. the bottom-left and top-right corners. Since that'll only produce a perfectly diagonal gradient for square boxes, you'll still want to know angles like 135deg for some cases.

That's true Both well noted points and will revise my article with the correct syntax. I had actually started writing this article about a year ago and didn't double-check the syntax but thanks for pointing it out

Aww well, if you're ever interested in the basics of CSS, there's groups like #eCSSited and #CSS-DYK that will help you there or you could ask me but until you have the basics, I don't think this Article will make any sense

'tis alright. I am sometimes checking back the group, yours, and others articles, and even outside links to see what CSS does in basic form. I am the newbie of the newbie It just reminds me of math for some reason. D: