CSS 3.0 Series: The radial-gradient Object

Radial gradiants are on the cutting edge of CSS . We’re going to be looking at some examples of their use and their current capabilities.

In the previous post in this series we looked at linear gradients. The WebKit implementation of the radial gradient is just an extension of their linear gradient function while Mozilla and W3C have opted to make the radial gradient have its own function.

Implementations and their Differences.

W3C syntax explanation here  
radial-gradient([<bg-position> || <angle>,]?
 [<shape> || <size>,]? <color-stop>, <color-stop>
[, <color-stop>]*)

The W3C spec for the radial-gradient object is sufficiently
 complete for almost all tasks. It has the capability to create
 elliptical gradiants, and it is easy to define an angle,
 beginning and end of the line that defines the gradient.

Mozilla syntax explanation here 
-moz-radial-gradient( [<position> || <angle>,]?
 [<shape> || <size>,]? <stop>, <stop>
 [, <stop>]* )

The Mozilla implementation is fairly new so it is identical to
 the W3C spec. Firefox 3.6 and Minefield render all of the
 examples below very well.

WebKit syntax explanation here 
-webkit-gradient(<type>, <point> [, <radius>]?,
 <point> [, <radius>]? [, <stop>]*)

Being pioneers and having early adoption of gradients,
 the WebKit implementation uses the same format for both
 linear and radial gradients. Unfortunately, this does not
 include the ability to do elliptical gradients. You specify
 a start circle and end circle in absolute pixel units, and
 then specify color stops at percentages between those
 two circles. 

Microsoft syntax explanation here
NONE
The Microsoft implementation of CSS gradients is limited to
 linear gradients that are either horizontal or vertical. No
 radial gradients. I've noticed that their linear gradient does
 not work in the IE9 platform preview (works in IE5 through IE8)
 so I wonder what they are up to.

IMPORTANT : Gradients can be used in any property that accepts images.

Examples of radial gradiants applied to <DIV> tags.

Two colors #ffffff #F56991 from the center circular gradiant.

Here’s the code…

<div  style=
"    width: 250px;
height: 250px;
padding: 15px;
background: #F56991;
color: #E8F3F8;
border-radius:155px;
-moz-border-radius: 155px;
-webkit-border-radius: 155px;
box-shadow: 10px 10px 25px #CCC;
-moz-box-shadow: 5px 5px 25px #CCC;
-webkit-box-shadow: 5px 5px 25px #CCC;
background-position: center center;
background-image: radial-gradient(center
 45deg, circle closest-corner, #ffffff 0%, #F56991 100%);
background-image: -moz-radial-gradient(center
 45deg, circle closest-corner, #ffffff 0%, #F56991 100%);
background-image: -webkit-gradient(radial, center center,
 125, center center, 250, from(#ffffff), to(#F56991));
">&nbsp;</div>

Two colors #ffffff #F56991 from (175,75) circular gradiant.

Here’s the code…

<div  style=
"    width: 250px;
height: 250px;
padding: 15px;
background: #F56991;
color: #E8F3F8;
border-radius:155px;
-moz-border-radius: 155px;
-webkit-border-radius: 155px;
box-shadow: 10px 10px 25px #CCC;
-moz-box-shadow: 5px 5px 25px #CCC;
-webkit-box-shadow: 5px 5px 25px #CCC;
background-position: center center;
background-image: radial-gradient(175px 75px
 45deg, circle , #ffffff 0%, #F56991 100%);
background-image: -moz-radial-gradient(175px 75px
 45deg, circle , #ffffff 0%, #F56991 100%);
background-image: -webkit-gradient(radial, 175 75, 15,
 center center, 250, from(#ffffff), to(#F56991));
">&nbsp;</div>

Three colors #ffffff #F56991 #8A2624 from (175,75) circular gradiant.

Here’s the code…

<div  style=
"   width: 250px;
height: 250px;
padding: 15px;
background: #F56991;
color: #E8F3F8;
border-radius:155px;
-moz-border-radius: 155px;
-webkit-border-radius: 155px;
box-shadow: 10px 10px 25px #CCC;
-moz-box-shadow: 5px 5px 25px #CCC;
-webkit-box-shadow: 5px 5px 25px #CCC;
background-position: center center;
background-image: radial-gradient(175px 75px
 45deg, circle , #ffffff 0%, #F56991 50%, #8A2624 100%);
background-image: -moz-radial-gradient(175px 75px
 45deg, circle , #ffffff 0%, #F56991 50%, #8A2624 100%);
background-image: -webkit-gradient(radial, 175 75, 15,
 center center, 250, color-stop(0%, #ffffff),
 color-stop(50%, #F56991), color-stop(100%, #8A2624));
">&nbsp;</div>

Three colors #ffffff #F56991 #8A2624 from (195,60) elliptical gradiant.

Here’s the code…

<div  style=
"   width: 250px;
height: 150px;
padding: 15px;
background: #F56991;
color: #E8F3F8;
border-radius: 155px / 100px;
-moz-border-radius: 155px / 100px;
-webkit-border-radius: 155px / 100px;
box-shadow: 10px 10px 25px #CCC;
-moz-box-shadow: 5px 5px 25px #CCC;
-webkit-box-shadow: 5px 5px 25px #CCC;
background-position: center center;
background-image: radial-gradient(175px 75px
 45deg, ellipse , #ffffff 0%, #F56991 50%, #8A2624 100%);
background-image: -moz-radial-gradient(195px 60px
 45deg, ellipse , #ffffff 0%, #F56991 50%, #8A2624 100%);
">&nbsp;</div>

This only works for the Mozilla implementation

Looking at these examples, there really isn’t much more to say than CSS radial gradients are not ready for primetime yet but they sure look nice.