A Practical Guide on Radial Gradient - CSS

This works just like linear gradients and share many of the same values with linear gradients. However, we use the radial-gradient() function instead.

Radial gradients work from the inside to the outside of an element. Thus, the first color identified within the radial-gradient() function will sit in the absolute center of the element, and the second color will sit on the outside of an element. The browser will then create the transition between the two colors.

    div {
        background: #4666368;
        background: radial-gradient(#648880, #293f50);
    }

You can set color stops at different percentages across the element, so in fluid layouts the gradient will adjust to fit as the element changes in size. The general syntax of radial gradient is.

radial-gradient(size shape at position, color stops);

For older browsers the syntax is:

radial-gradient(position, size and shape, color stops);

Syntax for a full cross browser syntax would look like this:

    div {
        background: rgb(75, 75,200);
        background: -webkit-radial-gradient(50% 50%, circle, rgb(75, 75, 200), rgb(0, 0, 75));
        background:     -moz-radial-gradient(50% 50%, circle, rgb(75, 75, 200), rgb(0, 0, 75));
        background:         -ms-radial-gradient(50% 50%, circle, rgb(75, 75, 200), rgb(0, 0, 75));
        background:             -o-radial-gradient(50% 50%, circle, rgb(75, 75, 200), rgb(0, 0, 75));
        background:                 radial-gradient(circle at 50% 50%, rgb(75, 75, 200), rgb(0, 0, 75));
    }

We'll look at the three syntax areas - size and shape, position and color stops.

Position

The position the gradient radiates from is determined by specifying the position of its center. This takes the form of at, followed by keyword or unit values, specified in the same way as CSS background-position. So,

• circle at left top means"place the gradient center in the top left corner".

• circle at 20% 70% means "place the gradient center 20% across the element and 70% of the way down".

• circle at 0% means "place the gradient center on the left hand edge of the element, centered vertically". If you only specify a single value, that value is taken as the horizontal value, and the vertical is set to 50% (or center).

• If you set no value at all for the gradient position, it is assumed to be in the center of the element, i.e. center center or 50% 50%.

Size and Shape

You can combine explicit sizes or implicit sizes and shape keywords to set the size and shape.

Explicit Sizes

When using explicit sizes, the two values you set are the horizontal and vertical radii of the shape. You can combine them with keywords circle, ellipse. Of course, single values are expected with circle (one radius) and two values for ellipse (two radii). The values use any of the length units, apart from percentages. Few examples:

• 40px circle means "make the gradient circular, and give it a radius of 40px".

• 2em 4em ellipse means "make the gradient an ellipse, and give it a minor radius of 2em, and a major radius of 4em".

If you don't set value for ellipse at all, the setting defaults to implicit size (ellipse cover)

Implicit sizes

The keywords that can be combined with the shape are: closest-side, closest-corner, farthest-side and farthest-corner.

    .close-side {
        background: radial-gradient(closest-side circle at 35% 25%, rgb(75, 75, 200), rgb(0, 0, 75))
    }

    .close-corner {
        background: radial-gradient(closest-corner ellipse at 35% 25%, rgb(75, 75, 200), rgb(0, 0, 75))
    }

    .far-side {
        background: radial-gradient(farthest-side circle at 35% 25%, rgb(75, 75, 200), rgb(0, 0, 75))
    }

    .far-corner {
        background: radial-gradient(farthest-corner ellipse at 35% 25%, rgb(75, 75, 200), rgb(0, 0, 75))
    }

You can use the keywords contain in place of closest-side and cover in place of farthest-corner. However, be sure it is properly supported by browsers.

Color Stops

You can specify the position of any number of color stops along the gradient (starting at the center of the gradient and going outwards) in any length unit. The colors can be in any preferred format.

Repeating Radial Gradients

Use repeating-radial-gradient function instead of radial-gradient to repeat the pattern you have set as far as the element it is applied to extends.

Note that you can use radial gradients anywhere you can use images - border-image, list-style-image, etc.