How to control CSS3 Radial Gradients

Finally, something not so outrageous using CSS3 that we can all understand

I got a link through twitter about a raindrop done using CSS (don’t bother looking at this in Safari or Chrome, because he write the additional CSS for that). Normally this is the kind of thing that I will look at and say cool, but waste of time. This one caught my eye though because it is actually pretty simple. I’m not going to recreate the damn thing, but all it is, is a bunch of divs and a surprisingly small amount of CSS. I was actually impressed with this one, and I think it could have been done with just an ul and list items. Now, I would still use an image in a real life situation, but I picked this piece because I did not really know how to use the new gradients. This guy obviously does.

Learnin’

That led me to do some small bit of research and tests, and found it is not all that hard, just slightly confusing to get a grasp of what the numbers do. On top of that, the CSS Safari uses to do radial gradients is pretty different.

Some things to note about Safari while doing my demo. I could not get it to recognize percentages for the values in the border radius, so I had to do pixels. I’m not sure it can or not, and I didn’t find anything about it. Safari 5 does not need -webkit- in front of border-radius – it will still use it, so I would include it anyway to support the older versions.

If you look at the demo, you can see a div with a basic radial gradient, with rounded corners set to 100% in FF, and 300px in Safari. This should appear as a circle with red in the middle, then orange fading out to yellow. The second, is just to show you something easy to do with it. It is a png with the word GRADIENT cut out of it, and a drop shadow layer style put on. It then has a div behind it with a radial gradient, which if you ever wanted to change the colors, you wouldn’t have to use photoshop to do it. Just change the CSS!

Click here for demo.

So how do you do it already?

It took me a while to understand what all of the numbers meant, and how to move the gradient around. Using the image below, I’ll explain what each does in plain English. After reading it, the best way to really get a grasp of it is to mess with it in Firebug, adjusting the numbers.

Gradient CSS image

Firefox:
A: This number, as it goes down, moves the center of the gradient left/right, while shrinking/increasing the amount of the center color displayed.
B: Same as A, only top/bottom
C: Adjusts the angle of the gradient, but in circle shape, this doesn’t do anything
D: Shape of the gradient – This can be circle or ellipse
E: Size of the gradient. This is like PS, where you can start and end your gradient at any point. This can be set to: closest-side, closest-corner, farthest-side, farthest-corner, contain (same as closest-side), and cover(same as farthest-corner)
F: This is the center color of the gradient
G: The color stop position – can be from 0 – 100%

Safari:
A: This sets what type of gradient: linear or radial
B: Moves the gradient left/right and top/bottom while keeping the center of the gradient in the middle (will look like a cone if you move the numbers far enough
C: How much you are fading in or out the center color
D: Moves the center of the gradient left/right and top/bottom while keeping the gradient in the middle
E: How much of the center color that is solid (not faded out) – mess with this and you will see some cool stuff!
F: The outer color
G: The center color
H: Think of this as the color between the outer and inner colors, and its percentage to show. Note you can do a very smooth gradient without F & G, and only use a bunch of color-stops.

Here is the CSS I used for the circle:

#container {
	-moz-border-radius: 100%;
	border-radius: 300px;
	width: 300px;
	height: 300px;
	margin: 50px auto;
	background: 
		-moz-radial-gradient(150px 150px 0deg, circle closest-side, #ff0000 0%, orange 50%, yellow 100%);
	background: 
		-webkit-gradient(radial, 150 150, 100, 150 150, 40, from(yellow), to(red), color-stop(.4,orange));
}

Take a look at the demo, copy the HTML and CSS, and start messing around. Once you start fiddling with it, everything will start to make sense. Hopefully my image and little lists helped you to understand CSS3 radial gradients better, and you get a clearer picture on controlling them. Now you can go and do some experimenting and come up with more raindrops.

Coupon Code: webmachine

jQuery junkBox

.live();
This method attaches a handler to the event for every element that matches what you are searching for – currently or any added after the fact (which bind() does not do). Below, live() attaches a click event to anything with the class ‘touchThis’, including anything added later to the DOM with the same class.

$('.touchThis').live('click', function() {
alert('You totally just touched that!');
}

Tags:

One Response to “How to control CSS3 Radial Gradients”

  1. Css 3 is a real great evolution in the web. I think browsers will be compatible very fast and in 1-2 years most of the websites will integrate CSS3 and HTML5.

Leave a Reply