Radial GradientRadial GradientA radial gradient is defined by its center. By default, shape is ellipse, size is farthest-corner, and position is center. To create a radial gradient you must also define at least two color stops. The syntax to create a Radial Gradient is:
On the left is an image of a Radial Gradient:. We want to limit the images on our webpages whenever possible because they take download time and bandwidth usage, while CSS does not (to the same extent). In the demonstration below, we use CSS coding to display a default Radial Gradient, rather than an image:
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
#grad1 { height: 150px; width: 200px; background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 to 6.0 */ background: -o-radial-gradient(red, green, blue); /* For Opera 11.6 to 12.0 */ background: -moz-radial-gradient(red, green, blue); /* For Firefox 3.6 to 15 */ background: radial-gradient(red, green, blue); /* Standard syntax (must be last) */ } #grad2 { height: 150px; width: 200px; background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 to 6.0 */ background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* For Opera 11.6 to 12.0 */ background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* For Firefox 3.6 to 15 */ background: radial-gradient(red 5%, green 15%, blue 60%); /* Standard syntax (must be last) */ } </style> <body> <h3>Radial Gradient - Evenly Spaced Color Stops (default)</h3> <p>This is a Radial Gradient with default parameters</p> <div id="grad1"></div> <hr /> <h3>Radial Gradient - Differently Spaced Color Stops</h3> <p>Parameters are Red 5%, Green 15%, Blue 60%</p> <div id="grad2"></div> </body> |
Radial Gradient - Evenly Spaced Color Stops (default)This is a Radial Gradient with default parameters Radial Gradient - Differently Spaced Color StopsParameters are Red 5%, Green 15%, Blue 60% |
Note: Internet Explorer 9 and earlier versions do not support gradients.
