A Practical Guide on Radial Gradient - CSS 
Tags: css, html
Published: 2019-11-08 19:15:19


This works just like [linear gradients](https://dev.to/obinnaogbonnajoseph/a-practical-guide-to-linear-gradients-css-2506) 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.

```CSS

    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:

```CSS

    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));
    }

```

{% codepen https://codepen.io/obinnaogbonnajoseph/pen/NWWMmpJ %}

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,

{% codepen https://codepen.io/obinnaogbonnajoseph/pen/ExxRYep %}

* `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)

### _Implicit sizes_

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

{% codepen https://codepen.io/obinnaogbonnajoseph/pen/rNNKBqv %}

```CSS

    .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.

{% codepen https://codepen.io/obinnaogbonnajoseph/pen/QWWxLRg %}

## 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.