Dissecting CSS3 gradients - Part 1

Ryan Sukale

Aug. 26, 11 · Web Dev Zone · Interview

Like (0)

Save

3.71K Views

One of the features in CSS 3 that I find to be the most intriguing is the application of gradients via simple css rules. The reason why I find it so awesome is because while designing pages, I have usually had to insert dummy placeholder images in the background, or leave the backgrounds as colorless while writing the html and css. So, even when I am almost done with the design, I always have a second task to open up an image editing software, most likely GIMP, and the create the images as per the sizes of my html elements.

Interesting as it may seem, the main problem arises is when I dont like what I see. When you amalgamate all the colors on a website, its highly possible that you dont like the color scheme. This then inevitably brings you back to your image editing software to tweak with the colors to get it right. And this can happen several times, especially when you are prototyping to give a client a demo of what you want things to look like. You will find yourself switching several times between your html editor and your image editor. This is exactly where CSS 3 gradients fit into the picture like cheese fits into a burger. It was just the missing ingredient. So, in this blog post, I am going to cover the following topics that will help you get a better understanding of CSS 3 gradients.

In this two part series, I will be covering all the essentials to get you up and running with CSS 3 gradients.

In this first part of the series, we will try to answer the following questions.

What are CSS 3 gradients? - the basic concepts
What are the types of CSS 3 gradients?
How to use CSS 3 gradients? - elements of design

In the second part of this series, we shall see a bit more advanced usage of CSS 3 gradients and try to answer questions, such as

How to use multiple CSS 3 gradients?
How to use CSS 3 gradients with other CSS 3 properties?
How to use CSS 3 gradients to create Patterns?
Browser issues when using CSS 3 gradients.
Where to find resources that smartly generate cross browser CSS 3 gradients for you?

So, lets get started :)

1) What are CSS 3 gradients? - the basic concepts

If you are graphic designer at any level, I am sure that you are aware of what gradients are. Making gradients in graphic tools like GIMP or Photoshop are pretty easy. But now, using CSS 3, you can create gradients with almost the same ease.

The most important thing to note about CSS 3 gradients is that they are applied as part of the 'background-image' css property.i.e. CSS 3 gradients does not require a new css property, it just adds a new function that can be added to the already existing 'background-image' property. It makes quite a lot of sense to add a css gradient as a part of the background, because that is exactly the way images are used - to lie in the background of an html element.

The next important thing to note is that you can add multiple background gradients, using a comma separated list of gradient functions on the same background css property.

Now lets move on to the next section and learn about the various types of CSS 3 gradients.

2) What are the types of CSS 3 gradients?

There are two types of CSS 3 gradients.

Linear Gradients
Radial Gradients

Linear Gradients :

Linear gradients are the simplest and the most common of all. Let us see the syntax and then see how it works.

linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

I just have to say this right now. Linear gradients are HOT!

I totally love them. Instead of breaking down the syntax and explaining the various terms, lets me try to explain the concept of gradients in a way that I see it.

Let us assume that you want to create a linear gradient. What that means is that you want to move from one shade of color to another in a linear fashion. Now lets try to break down our own thought process when we visualize gradients.

Q :What do we need to create a simple linear gradient??

A : At least 2 colors. (ya, i know that was simple).

Q : How do you know what the 2 colors are used for?

A : You define one of the colors as the start of the gradient, and the other color as the end of the gradient. These are called as you color stops. Since(for now) you have just 2 colors, you have 2 color stops.

Q : What is the direction of the gradient?? Is it a horizontal gradient? Is it a vertical gradient? Or is it at a certain angle??

A : We need a direction for our gradient. Mathematically, directions are defined by drawing a vector, from one start point to the other point, with an arrowhead indicating the direction of the vector. So when you draw any such line on a sheet of paper, you obviously will be drawing a line such that it makes an angle with the horizontal axis of the sheet of paper. This angle is the measure of the direction of the vector. Hence, we need a way to specify an angle when specifying a gradient in CSS 3.

So, now we have our three main ingredients to cook our CSS 3 gradient.

A start color.
An end color.
An angle.

Lets put these three together in the gradient syntax.

linear-gradient( angle, start-color, end-color);

Now it looks pretty simple, doesn't it?

Although there is another syntax, I feel that this syntax is not only easily readable, but also gives you an immense amount of flexibility in defining the options. In the sections that follow, we will use colors and create a few linear gradients to see this form of defining gradients.

Radial Gradients :

The other type of gradient is radial gradients. Now radial gradients are quite similar to linear gradients. You have almost the same three main ingredients.

radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* )

This looks pretty scary, doesn't it? Well it does to me. So, lets try to break it down in the same way that we broke down the syntax for linear gradient.

Apart from the three important ingredients, the new important ingredient in the radial gradient is the 'shape' of the gradient. We know that a radial is something like a circle. In CSS 3, you can define the radial to be one of two shapes - circle, ellipse.

While using the radial gradient, there is one property that is somehow more interesting than the angle. And that is, the coordinates of the center of the radial (circle or ellipse).

The radial gradient has many more options as compared to the linear gradient and therefore we can have several more permutations and combinations of the syntax, which thereby makes it completely impossible for me to cover radial gradients in this blog post. So we will only see the basics and then you can explore the various other options at your own leisure once you have a better understanding of the underlying concepts.

To capitulate, the important ingredients of a radial gradient are

The coordinates of the center of the radial.
The shape of the radial
A start color (which becomes the color of the center).
An end color (which becomes the color of the outer edge of the radial).

Lets put these three together in the gradient syntax.

radial-gradient( center-coordinates, shape , start-color, end-color);

This syntax can be used to define the most basic form of a radial gradient. And we shall see in the upcoming examples, how they can be applied to style the background of an html element.

3) How to use CSS 3 gradients? - The Elements Of Design

So far, we have seen what CSS 3 gradients are. And we also learnt the most basic form of their syntax. Now comes the most interesting part of this post and that is, the part where we demo the various CSS 3 gradients in use.

For the purpose of our demo, I will be making use of an HTML div element having dimensions 200px X 200px and apply the various gradients to it.

Linear gradients

Sample 1:

This one shows a simple gradient from black to white.

Css Code

background-image:linear-gradient(0deg, black, white);

The css code is very simple. You want a horizontal gradient (hence the 0 degrees), the starting color is black, the ending color is white and the gradient effect spreads across the dimention of the entire html element.

Sample 2:

Css Code

background-image:linear-gradient(45deg, black, white);

In this example, we have simply rotated the axis by 45 degrees. As you might have noticed, the axis rotates about the center of the html element. So when you rotate the axis by 45 degrees anticlockwise, the start color automatically starts at the left bottom and the end color ends at the right top, thereby giving you a gradient of 45 degrees about the center of the html element. This is a very important point to note about linear gradients. The following image (that I created using Inkscape, not CSS 3) should be able to give you a better idea of the angle calculation.

The axis/vector representing the direction of the gradient rotates about the center of the html element to which the gradient it applied.

The next example demonstrates using three colors in a gradient. It is similar to the previous two examples, the only difference being the additional parameter that describes the third color.

Sample 3

Css Code

background-image:linear-gradient(45deg, black, white, green);

In this example you see that the gradient started normally from the lower left corner, then it gradually changed to white when it reached the middle and then it gradually changed to green when it reached the upper right corner. This means that the gradient rendering algorithm tried to evenly distribute the area over which the gradient was to be rendered between the three colors that we specified.

In the next example, we will try a tiny variation of the above

Sample 4

Css Code

background-image:linear-gradient(45deg, black 20%, white 50%,green 80%);

As you see in the above code, this is a slight variation of the previous example. I have specified percentage values along with the color. To understand what this percentage means, you need to keep one thing in mind - the direction vector of the gradient. As you move along the direction vector of the gradient, the start of the vector is 0 percent. The end of the vector is 100%. So, when you specify the a percentage along with a color stop when using gradients, you are actually saying that at a given percent distance along the vector, I want my color to be #some-color. i.e. you are defining the position of the color stop along the direction vector. In the above example, I declare black to be the color at 20 percent distance from the start of the direction vector, white to be the color at 50 percent distance from the gradient direction vector, and green to be the color at 80 percent of the distance from the gradient direction vector. Since before 20%, no color is specified, hence the origin color(i.e. black in our case) is used from 0 t 20 percent. And since no color is specified after 80%, hence green is used as the color after 80 percent. So, we see that our gradients in this background are between 20 percent and 80 percent. The remaining parts are fixed colors.

Radial Gradients

In this section we will see a few examples that make use of the simplest form of radial gradients.

Sample 1

Css Code

	
background-image: radial-gradient(50% 50%, circle , #000000,#ffffff );

In the above example, you can see that the first parameter is used to set the x and y coordinates of the center of the radial. And I have set i to be 50% from the left and 50% from the top. The next parameter specifies the shape of the radial, which in our case is 'circle'. The next parameter gives the start color of the circle from the center. The fourth parameter is used to specify the end color of the radial, which in our case happens to be white. So, we have a simple gradient, starting from black at the center to white at the edges of the element.

Now this may not seem so interesting at first. But when you perform a few tweaks on the parameters, you can create something really cool. Check out the next sample.

Sample 2

Css Code

background-image: radial-gradient(50% 50%, circle , #000000 50%,#ffffff 51% );

As you see in the above code, we were easily able to create a circle with a sharp boundary using gradient parameters. In the syntax above, we have specified a percentage alongside each color value. To understand how this percentage applies, think of it in this way - You have a circle with its center set at the center of your html element. Now Since its a circle, it has a radius. When you specify #000000 50% as the first color, what you are actually saying is that upto 50 percent of the radius, starting from the center, you want the color to be #000000. In the next color parameter, when you say #ffffff 51%, you are saying that from 51 percent of the radius onwards, you want the color to be #ffffff. Since there is only a 1 percent difference between the two colors, you get a nice sharp boundary instead of a gradient between the two colors. If however you were to increase the difference in the percentage, as in the below example, you would get a gradient.

Sample 3

Css Code

background-image: radial-gradient(50% 50%, circle , #000000 50%,#ffffff 71% );

As you see in the css code above, I increased the percentage value of the color #ffffff to 71 percent. So we were able to see a gradient effect from the color #000000 to the color #ffffff between 50% and 70% of the radius of the circle, which looks like a nice halo.

The wonderful thing about radial gradients is that just like linear gradients, you can also add more color stops. So lets try to make a much more realistic halo effect using radial gradients.

Sample 4

Css Code

background-image: radial-gradient(50% 50%, circle , #000000 40%,#FFFF00 41%,#ffffff 71% );

As you see in the above code, creating a halo was just a matter of adding another color stop to the radial gradient function and setting the proper percentage values. Beautiful, is'int it? Kinda looks like a scary eclipse, but still beautiful. Probably because it hardly required any effort to create.

Well, that's the beauty of CSS 3 gradients.

Now that we have a basic idea of CSS 3 gradients, in the next part of this series we will see how we can mix and merge gradients to create something even more powerful, and of course, beautiful, such as creating gradient patterns and using the gradient property with other CSS 3 properties.

Excited anyone? !!

Happy Programming :)

From http://mycodefixes.blogspot.com/2011/08/dissecting-css3-gradients-part-1.html

Topics:

Opinions expressed by DZone contributors are their own.

Comments

Dissecting CSS3 gradients - Part 1

Web Dev Partner Resources