A radial gradient is defined by its center.To create a radial gradient you must also define at least two color stops. You can also specify the gradient's center, shape (circle or ellipse) as well as its size. By default, center is center, shape is ellipse, and size is farthest-corner.
Example of Radial Gradient:
Syntax
background: radial-gradient(center, shape size, start-color, ..., last-color);
Example
A radial gradient with evenly spaced color stops:<!DOCTYPE html>
<html>
<head>
<style>
#grad1
{
height:150px;
width:200px;
background: -webkit-radial-gradient(red, green, blue); /* Safari */
background: -o-radial-gradient(red, green, blue); /* For Opera 11.1 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) */
}
</style>
</head>
<body>
<h3>Radial Gradient - Evenly Spaced Color Stops</h3>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
Radial Gradient - Differently Spaced Color Stops
Example
A radial gradient with differently spaced color stops:<!DOCTYPE html>
<html>
<head>
<style>
#grad1
{
height:150px;
width:200px;
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* For Opera 11.1 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>
</head>
<body>
<h3>Radial Gradient - Differently Spaced Color Stops</h3>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
+CSS3 +CSSReflex +CSS Author +CSS Design Awards +Css Color +CSS Light +CSS Mobi +css3mania +CSS3 : The Workshop +CSS3 Templates +CSS3 +CSS3Ps +css3mods +CSS3Menu
No comments: