CSS3 Tutorial: radial gradients

Radial gradients

radial-gradient

Syntax: radial-gradient( [[ circle  || <length> ] [ at <position>]? , | 
[ ellipse || [<length> | <percentage> ]{2}] [ at <position> ]? , |  
[ [ circle | ellipse ] || <extent-keyword> ]  [ at <position> ]? , | 
                                                at <position> ,     <color-stop> [ , <color-stop> ]+ ) 

where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side             
and <color-stop> = <color> [ <percentage> | <length> ]?

The CSS radial-gradient() function creates a 2D image. Radial gradients are defined by their center, the ending shape ( a circle or an ellipse) contour and position, and color stops.

Browser support

Example1: Radial gradient centered and full size in a DOM-element

The CSS

#radial_gradient_example1 {
    width:300px;
    height: 300px;
    background: -webkit-radial-gradient(circle 50px at 50% 50%, #1a82f7 0%, #2F2727 100%);
    background: radial-gradient(circle 150px at 50% 50%, #1a82f7 0%, #2F2727 100%);
}

The HTML

    <div id="radial_gradient_example1"></div>
Radial gradient example1
Image 1. Radial gradient with CSS3.

Leave a comment