CSS3 Radial Gradients - Size Keywords

The size keywords tell the radial gradient where the farthest radius should be; that is, the place where the last colour becomes fully saturated. The size parameter defines the size of the gradient. There are four values:

1 - Closest-side
The gradient is sized so that its outer shape meets the side of the gradient box that is closest to its center. If an ellipse is specified the sides in both dimensions are met.
2 - Farthest-side
The gradient is sized so that its outer shape meets the side of the gradient box that is farthest away from its center. If an ellipse is specified the sides in both dimensions are met.
3 - Closest-corner
The gradient is sized so that its outer shape runs through the corner of the gradient box that is closest to its center. If an ellipse is specified it is given the same aspect-ratio as if closest-side (1) was specified.
4 - Farthest-corner
The gradient is sized so that its outer shape runs through the corner of the gradient box that is farthest away from its center (default value). If an ellipse is specified it is given the same aspect-ratio as if farthest-side (2) was specified.

Using a div box of 150 pixels square, we position the center of the radial gradient 60% horizontally to the right and 55% vertically downward, in each of the following examples. Using black as the last color, we can see how the different keywords affect the size and appearance of the radial gradient:

HTML file: Displayed by browser:
<style>
#grad1 {
   height: 150px;
   width: 150px;
   background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Safari 5.1 to 6.0 */
   background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* For Opera 11.6 to 12.0 */
   background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* For Firefox 3.6 to 15 */
   background: radial-gradient(closest-side at 60% 55%,blue,green,yellow,black); /* Standard syntax (must be last) */
}
#grad2 {
   height: 150px;
   width: 150px;
   background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Safari 5.1 to 6.0 */
   background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* For Opera 11.6 to 12.0 */
   background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* For Firefox 3.6 to 15 */
   background: radial-gradient(farthest-side at 60% 55%,blue,green,yellow,black); /* Standard syntax (must be last) */
}
#grad3 {
   height: 150px;
   width: 150px;
   background: -webkit-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Safari 5.1 to 6.0 */
   background: -o-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* For Opera 11.6 to 12.0 */
   background: -moz-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* For Firefox 3.6 to 15 */
   background: radial-gradient(closest-corner at 60% 55%,blue,green,yellow,black); /* Standard syntax (must be last) */
}
#grad4 {
   height: 150px;
   width: 150px;
   background: -webkit-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Safari 5.1 to 6.0 */
   background: -o-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* For Opera 11.6 to 12.0 */
   background: -moz-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* For Firefox 3.6 to 15 */
   background: radial-gradient(farthest-corner at 60% 55%,blue,green,yellow,black); /* Standard syntax (must be last) */
}
</style>
<body>
<p><strong>Closest-side:</strong></p>
<div id="grad1"></div>
<p><strong>Farthest-side:</strong></p>
<div id="grad2"></div>
<p><strong>Closest-corner:</strong></p>
<div id="grad3"></div>
<p><strong>Farthest-corner (this is default):</strong></p>
<div id="grad4"></div>
</body>

Closest-side:

Farthest-side:

Closest-corner:

Farthest-corner (this is default):

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

Back button Table of Contents Next button