• Tweet

In my previous post, I explained how to make linear gradients in CSS3. In this post, I will explain how to create radial gradients in CSS3 with radial-gradient property without using any image.

For Mozilla Browsers

Syntax:

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

Explanation of Syntax

Position: The starting point of the gradient. If the position is not specified, the default value is center.
Angle: We can define starting point of gradient by angle as well.The default value is 0deg.
Shape: The shape of gradient. It can be either circle or ellipse. If shape is not specified, the default value ellipse is used.
Size: This is the size of the gradient, and it takes one of the following values: closest-side, closest-corner, farthest-side, farthest-corner.
Stop: This value is comprised of a <color> value, followed by an optional stop position, which can be either a percentage or a <length>.

Example use
The simplest use of radial-gradient for Mozilla browsers is

background-image: -moz-radial-gradient(#167F39, #00261C);

For Webkit Browsers

The New Syntax for Webkit Browsers

As the Webkit has decided to change their syntax to match that used in Firefox, here’s new syntax of radial gradient for webkit browsers:

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

Explanation of Syntax

Position: The starting point of the gradient. The value can be defined in pixels, or percentage or by position. If the position is not specified, the default value is center.
Shape:The shape can be either circle or ellipse. The default value is ellipse.
Size:This is the size of the gradient, and it takes one of the following values:closest-side, closest-corner, farthest-side, and farthest-corner.
Stop: This value is comprised of a <color> value, followed by an optional stop position, which can be either a percentage or a <length>.

Examples of Radial Gradients:

Example1:

background-image: -moz-radial-gradient(#BDDFB3, #167F39);
background-image: -webkit-radial-gradient(#BDDFB3, #167F39);

Output:

Example 2:

background-image: -moz-radial-gradient(0% 50%,
farthest-corner, green, yellow);
background-image: -webkit-radial-gradient(0% 50%,
farthest-corner, green, yellow);

Output:

Example 3:

background-image: -moz-radial-gradient(60% 70%,
circle closest-side, #FFF5A5,#434EFF 70% ,#FFFFFF 100%);
background-image: -webkit-radial-gradient(60% 70%,circle
closest-side, #FFF5A5,#434EFF 70% ,#FFFFFF 100%);

Output:

Example 4:

background-image: -moz-radial-gradient(45px 45px 45deg,
farthest-side, #ECDA52 0%, #290852 100%);
background-image: -webkit-radial-gradient(45px 45px,
farthest-side, #ECDA52 0%, #290852 100%);

Output:

Tested on:

Safari 5

FF 3.6

Opera 11

Chrome 8

IE 9

Please note you need latest webkit build in order to test the new syntax. The latest nightly build can be downloaded from here.