CSS Introduction | CSS3 Modules | CSS3 Radial Gradients

CSS3 Radial Gradients

In CSS3, gradient effects can be displayed not only as linear gradients, but also as radial gradients.

CSS3 Gradient Support Versions

The major web browser versions that support CSS3 gradients are as follows. The table also lists the first versions that supported this feature through vendor prefixes.

Radial Gradient

A radial gradient applies a circular gradient effect to the HTML element it is applied to. To create a radial gradient, you need at least two color stops.

The syntax of a radial gradient is as follows.

Syntax

background: radial-gradient(shape size at center-point, color-stop1, color-stop2, ...);

By default, a radial gradient uses ellipse for the shape, farthest-corner for the size, and center for the center coordinates.

<style>
    #grad {
        background: red;
        background: -webkit-radial-gradient(red, orange, yellow, green, blue, indigo, purple);
        background: -moz-radial-gradient(red, orange, yellow, green, blue, indigo, purple);
        background: -o-radial-gradient(red, orange, yellow, green, blue, indigo, purple);
        background: radial-gradient(red, orange, yellow, green, blue, indigo, purple);
    }
</style>

In the example above, the first background property is for all browsers that do not support the radial-gradient property. The last background property is written with the CSS standard syntax. This CSS standard syntax must appear after all vendor-prefixed code so the vendor-prefixed code can work correctly.

Adjusting the Spacing Between Color Stops

With CSS, you can adjust the spacing between color stops in a radial gradient.

The following example shows a radial gradient with different spacing between color stops.

<style>
    #grad {
        background: red;
        background: -webkit-radial-gradient(red 5%, yellow 20%, orange 50%);
        background: -moz-radial-gradient(red 5%, yellow 20%, orange 50%);
        background: -o-radial-gradient(red 5%, yellow 20%, orange 50%);
        background: radial-gradient(red 5%, yellow 20%, orange 50%);
    }
</style>

Setting the Shape of a Radial Gradient

With CSS, you can set the shape of a radial gradient to a circle instead of an ellipse.

The following example shows a circular radial gradient.

<style>
    #grad {
        background: red;
        background: -webkit-radial-gradient(circle, red, yellow, orange);
        background: -moz-radial-gradient(circle, red, yellow, orange);
        background: -o-radial-gradient(circle, red, yellow, orange);
        background: radial-gradient(circle, red, yellow, orange);
    }
</style>

Setting the Size of a Radial Gradient

With CSS, you can set the size of a radial gradient. The parameters that can be used to indicate the size are as follows.

• closest-side : The radial gradient size is set so that it reaches the closest side.
• farthest-side : The radial gradient size is set so that it reaches the farthest side. Therefore, on the closest side, part of the gradient will extend beyond the screen.
• closest-corner : The radial gradient size is set so that it reaches the closest corner.
• farthest-corner : The radial gradient size is set so that it reaches the farthest corner. This is the default size, and on the closest corner, part of the gradient will extend beyond the screen.

The following example shows radial gradients with various sizes.

<style>
    #grad_01 { background: radial-gradient(closest-side at 35% 35%, red, yellow, orange); }
    #grad_02 { background: radial-gradient(farthest-side at 35% 35%, red, yellow, orange); }
    #grad_03 { background: radial-gradient(closest-corner at 35% 35%, red, yellow, orange); }
    #grad_04 { background: radial-gradient(farthest-corner at 35% 35%, red, yellow, orange); }
</style>

repeating-radial-gradient() Method

The repeating-radial-gradient() method sets the radial gradient effect to repeat continuously.

The following example shows a repeating radial gradient.

<style>
    #grad {
        background: red;
        background: -webkit-repeating-radial-gradient(red, white 10%, blue 20%);
        background: -moz-repeating-radial-gradient(red, white 10%, blue 20%);
        background: -o-repeating-radial-gradient(red, white 10%, blue 20%);
        background: repeating-radial-gradient(red, white 10%, blue 20%);
    }
</style>