Dissecting CSS3 gradients - Part 2

Hello everyone :)

This post is a continuation of my previous article on CSS 3 gradients. If you are completely new to CSS 3 gradients, you might want to take a look at it.

In my previous blog post, we learnt about the basics of CSS 3 gradients. We also learnt about the different types of CSS 3 gradients and understood their basic syntax to get things up and running. And then lastly we saw a few examples demonstrating the use of the syntax.

In this post, we will take things a bit further, frankly because, it CAN be taken further! It seems like the simple CSS 3 gradient syntax that we saw recently can be used in a myriad of different ways that sometimes makes it hard to believe it is in fact CSS 3 gradients that are being used behind the scenes.

In this blog post, I will be trying to answer the following questions.

1. How to use multiple CSS 3 gradients?
2. How to use CSS 3 gradients with other CSS 3 properties?
3. How to use CSS 3 gradients to create Patterns?
4. Cross Browser CSS 3 gradients.
5. Where to find resources that smartly generate cross browser CSS 3 gradients for you?

So, lets not waste any more time and get to the point.

---

1) How to use multiple CSS 3 gradients?

CSS 3 gradients are awesome. And when one gradient is awesome, just imagine what adjective you would have to use if you had more than one gradient(If you manage to come up with the proper word, tell me in a comment!). Adding multiple CSS 3 gradients is a pretty simple task. Instead of passing only one gradient function in the background image, you can pass multiple, comma separated list of gradient functions as the background image. However, while doing so, you would have to keep a few things in mind. Since a gradient is much like a background image, having multiple gradients is almost conceptually equivalent to having a stack of multiple background images. And that means, if you want to be able to see the colors of the gradient that is at a lower level in the stack, you will have to use a transparent color on the upper level of the stack.

So, the two new features that should come to your mind when using multiple backgrounds are

1. Stacking level of gradients.
2. Usage of Transparency while making gradients.

Lets understand the stacking level of gradients by using a simple example where we use 2 gradients layers in the gradient stack.

Sample 1

Css Code

background-image: linear-gradient(0deg,#000000 50%,#ffffff 51% ),
radial-gradient(50% 50%, circle , #000000 40%,#ffffff 41% );

As you can see in the code above, I have applied 2 gradients in the background image property. One is a linear gradient, and the other is a radial gradient. The linear gradient covers half of the block width with black, and the other half with white. The radial gradient is used to create a sharp circle. However, we are not able to see the circle on the browser. That's because of the fact that the order in which you specify the gradient functions is the order in which the stack is created and this stack grows downwards, i.e. the gradients that are specified first appear as the topmost layers, and the gradients that you specify later appear below them. Since in our example, the radial gradient was specified after the linear gradient, and because all the colors in linear gradient were opaque, we were unable to see the underlying radial gradient.

Now lets make use of transparency in the gradient function and see how things change.

Sample 2

Css Code

background-image: linear-gradient(0deg,#000000 50%,transparent 51% ),
radial-gradient(50% 50%, circle , #000000 40%,#ffffff 41% );

As you see, in the above code, I made use of transparency in linear gradient function instead of using a white color. And we were able to see the underlying black color circle.

So, this is a tip. If you are making use of multiple CSS 3 gradients, you can make shapes by mixing and merging the gradient colors with transparency.

---

2) How to use CSS 3 gradients with other CSS 3 properties?

CSS 3 gradients are a terrific feature. But what makes them even more terrific is that when you use multiple background images, you can also use them with other CSS 3 properties and create something really amazing. The two other CSS 3 properties that I find outstandingly helpful are

background-position
background-size

First lets take a look at the background size property. The background size property is used to define the size of the background. What makes this interesting when using multiple gradients is that instead of supplying one value for the width and height of the background, you can now supply a list of comma separated values of the background size, each of which will be applied to the respective gradient.

What I mean to say is this

background-image : gradient1, gradient2, gradient3;
background-size:gradient1-size, gradient2-size, gradient3-size;

Lets take a look at some code in action. We will make use of the same gradients that we used in the previous example. But we will add a background size property this time and see what happens.

Sample 3

Css Code

background-image: linear-gradient(0deg,#000000 50%,transparent 51% ),
radial-gradient(50% 50%, circle , #000000 40%,#ffffff 41% );
background-size: 100% 100%, 50% 50%;

In the above CSS, I specified 2 background gradients and two corresponding background sizes. For the second background size, I specified it to be 50 percent of the width and height of the element. Because the background is being repeated, the second background gets repeated across the dimensions of the element and you are able to see two circles in the image. If I were to make the linear gradient fully transparent, you would be able to see 4 circles in the element instead of 2. At present those two are being hidden by the linear gradient layer.

Now lets take a look at the effect of background position on gradients.

Sample 4

Css Code

background-image: radial-gradient(50% 50%, circle , #000000 40%,#ffffff 41% );
background-size: 50% 50%;
background-position:50% 0%;

As you see in the sample code, I just shifted the background position of the gradient in the horizontal direction by 50%.

However there are some quirks when using the background position property along with multiple gradients with different browsers as of this writing. So you would want to be careful when trying it out on your own.

---

3) How to use CSS 3 gradients to create Patterns?

Now gradient patters are an interesting feature that come into play when you begin to mix and merge multiple gradients and the background-size property.

To start with, lets make a very simple gradient pattern.

Sample 5

Css Code

background-image: linear-gradient(0deg,#000000 50%,transparent 51% ),
radial-gradient(50% 50%, circle , green 40%,#ffffff 41% );
background-size: 10% 10%, 25% 25%;

As you see in the code, the the gradient is the same, I just changed the color of the circle to green. But the main thing that I changed was the size of the gradient. And as you see, the effect is quite surprising.

Okey, lets try something else.

Sample 6

Css Code

background-image: linear-gradient(45deg,#000000 50%,transparent 51% ),
radial-gradient(50% 50%, circle , green 40%,#ffffff 41% );
background-size: 50% 10%, 25% 25%;

Pretty Cool eh?

One more??

Sample 7

Css Code

background-image: linear-gradient(45deg, #000000 25%, transparent 26%,transparent 75%, #000000 76%),
radial-gradient(50% 50%, circle , green 40%,#ffffff 41% );
background-size: 50px 50px, 25px 25px;

How about one more??


Sample 8

Css 3 Code

background-image: 
linear-gradient(45deg, #000000 25%, transparent 26%,transparent 75%, #000000 76%),
linear-gradient(45deg, #000000 25%, transparent 26%,transparent 75%, #000000 76%),
radial-gradient(50% 50%, circle , green 40%,#ffffff 41% );
background-size: 50px 50px, 25px 25px;

A point to be noted in the above example is that although I have specified 3 gradients, I have specified the size of only 2 gradients. Since the third size parameter is not specified, the first parameter of 50px 50px is applied to the third gradient.

Well, I can go on and on and on and endlessly keep creating patterns. Its just a question of playing with the parameter values (or rather playing with your grey matter until they burn and char and turn into dark matter).

For now, Ill stop here as I believe that you've got my point, and that is - CSS 3 gradients are powerful. So lets move ahead and address a more important question.

---

4) Cross Browser CSS 3 gradients.

As with most CSS 3 properties, browser support is not available unless you add browser specific prefixes to your css code. In case you don't already know the prefixes, these are the prefixes that you may have to use to make the gradient function work on different browsers

Firefox : -moz-
Webkit : -webkit-
Opera : -o-
IE : -ms-

For support in any other browsers, you can obviously check out their documentation to determine what prefix they use.

---

5) Where to find resources that smartly generate cross browser CSS 3 gradients for you?

Well, this is one of the most important questions to be addressed. That's because, although CSS 3 can be used to make patterns and many other things, you are most likely to find yourself using simple gradients to style your buttons or other elements to create subtle effects much more than anything else. And you're definitely gonna want to make it cross browser, as much as possible, and have a decent fallback color if your site is not going to opened in modern browser with gradient support.

That said, there are a few tools out there than can help you by generating CSS 3 gradients for all the browsers, i.e. with the same effects using all the prefixes for major browsers.

Below are a few links to gradient tools that I prefer to use when trying to make simple gradients. If you are aware of better sites, let me know about them in the comments. Ill take a look, and maybe add it to the main post as well.

• Ultimate CSS Gradient Generator : I personally use this gradient generator the most because of the browser support in the generated css.
• CSS3 Gradient Generatorby: Damian Galarza : I stumbled across this one recently.
• Westciv gradient generator tool : This one is good if you are interested in playing with radial gradients. It exposes all the other options that are available with radial gradients and can get a bit tricky at times.

---

To conclude, CSS 3 are a great feature and open up new dimentions of thinking for developers and web designers without having to turn to a graphic design tool every-time they change their mind about a particular color. As time will pass, standards compliant browsers are bound to have more support for the new CSS 3 properties. And CSS 3 gradients are definitely going to be an important part of every web designer's toolkit in the time to come.

Happy Programming :)

Signing Off
Ryan

Dissecting CSS3 gradients - Part 1

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.

1. What are CSS 3 gradients? - the basic concepts
2. What are the types of CSS 3 gradients?
3. 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

1. How to use multiple CSS 3 gradients?
2. How to use CSS 3 gradients with other CSS 3 properties?
3. How to use CSS 3 gradients to create Patterns?
4. Browser issues when using CSS 3 gradients.
5. 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.

1. Linear Gradients
2. 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.

1. A start color.
2. An end color.
3. 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

1. The coordinates of the center of the radial.
2. The shape of the radial
3. A start color (which becomes the color of the center).
4. 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 :)

Signing Off
Ryan