CSS3 Radial Gradients - Set Shape

The shape parameter defines the shape. It can take the value of circle or ellipse. The default value is ellipse. The following example displays both the ellipse and the circle Radial Gradients:

HTML file: Displayed by browser:
<style>
#grad1 {
   height: 150px;
   width: 200px;
   background: -webkit-radial-gradient(red, yellow, green); /* For Safari 5.1 to 6.0 */
   background: -o-radial-gradient(red, yellow, green); /* For Opera 11.6 to 12.0 */
   background: -moz-radial-gradient(red, yellow, green); /* For Fx 3.6 to 15 */
   background: radial-gradient(red, yellow, green); /* Standard syntax (must be last) */
}
#grad2 {
   height: 200px;
   width: 150px;
   background: -webkit-radial-gradient(red, yellow, green); /* For Safari 5.1 to 6.0 */
   background: -o-radial-gradient(red, yellow, green); /* For Opera 11.6 to 12.0 */
   background: -moz-radial-gradient(red, yellow, green); /* For Fx 3.6 to 15 */
   background: radial-gradient(red, yellow, green); /* Standard syntax (must be last) */
}
#grad3 {
   height: 150px;
   width: 200px;
   background: -webkit-radial-gradient(circle, red, yellow, green); /* For Safari 5.1 to 6.0 */
   background: -o-radial-gradient(circle, red, yellow, green); /* For Opera 11.6 to 12.0 */
   background: -moz-radial-gradient(circle, red, yellow, green); /* For Fx 3.6 to 15 */
   background: radial-gradient(circle, red, yellow, green); /* Standard syntax (must be last) */
}
#grad4 {
   height: 200px;
   width: 150px;
   background: -webkit-radial-gradient(circle, red, yellow, green); /* For Safari 5.1 to 6.0 */
   background: -o-radial-gradient(circle, red, yellow, green); /* For Opera 11.6 to 12.0 */
   background: -moz-radial-gradient(circle, red, yellow, green); /* For Fx 3.6 to 15 */
   background: radial-gradient(circle, red, yellow, green); /* Standard syntax (must be last) */
}
</style>
<body>
<div id="grad2" style="float:right;">Height: 200px, Width:150px</div>
<h3>Radial Gradient - Ellipse (default):</h3>
<div id="grad1">Height: 150px, Width:200px</div>
<hr />
<div id="grad4" style="float:right;">Height: 200px, Width:150px</div>
<h3>Radial Gradient - Circle:</h3>
<div id="grad3">Height: 150px, Width:200px</div>
</body>
Height: 200px, Width:150px

Radial Gradient - Ellipse (default):

Height: 150px, Width:200px
Height: 200px, Width:150px

Radial Gradient - Circle:

Height: 150px, Width:200px

Note: Internet Explorer 9 and earlier versions do not support gradients.

Back button Table of Contents Next button