HOLLA TECH - LEARN

Radial Gradients
 

To create a radial gradient, you must define at least two color stops.
The radial gradient is defined by its center.

The CSS syntax of the radial gradient looks like this: 

background: radial-gradient(position, shape or size, color-stops);

 

The first value defines the gradient position. We can use a descriptive keyword, such as top, bottom, center, or left; or we can specify, for example, 50% 50% to set the gradient at the center or 0% 0% to set the gradient to start at top left.

The second value defines the shape and the gradient size. There are two arguments to shape gradients: The first is the ellipse, which is the default; and the second is the  circle.

NOTE!
Lastly, the third value defines the color combination.

Setting the Shapes
 

The shape parameter defines the shape. If you do not define the shape of the radial gradient, it will take the ellipse value by default.

In the example below, we didn’t specify the shape of the first div’s radial gradient, but for the second, we set the value to circle.
Here is what happened:

The CSS:

div.first {
   height: 150px;
   width: 200px;
   color: #FFF;
   background: -moz-radial-gradient(green, yellow, blue);  
}
div.second {
   height: 150px;
   width: 200px;
   color: #FFF;
   background: -moz-radial-gradient(circle, green, yellow, blue);
}

 

Result: 

Holla Tech - Learn CSS3


Radial Gradient Position
 

Essentially, we can use the same method used to specify the location of a background image with the background-position CSS property to specify the location of the ellipse’s center. We specify the horizontal position of the background, and – optionally – the vertical position using either keywords (left, center right, or top, center, bottom), length values, percentage values, or some combination of these.

In the example below, the first gradient starts from the top left corner; in the second, we set 5% to the green, 15 % to the yellow and 60% to the blue.

div.first {
   height: 150px;
   width: 200px;
   color: #FFF;
   background: -moz-radial-gradient(top left, green, yellow, blue);  
}
div.second {
   height: 150px;
   width: 200px;
   color: #FFF;
   background: -moz-radial-gradient(green 5%, yellow 15%, blue 60%);
}

 

Result:

Holla Tech - Learn CSS3

NOTE!
In addition to percentages, you can use pixels or ems.

Setting the Color Stops
 

As with linear gradients, a color stop is specified with a color, plus an optional stop position, which is a length or percentage value.

Here’s a simple circular gradient with color stops:

background: -moz-radial-gradient(circle, green 40%, yellow 50%, blue 70%);

 

Result:

Holla Tech - Learn CSS3


BACK NEXT

CLICK ON THE BUTTON BELOW TO GO TO THE CSS MAIN COURSE PAGE. 

CSS MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT