---
title: CSS Radial Gradients
description: "> ## CSS Radial Gradients > > > > A radial gradient is defined by its center. > > > > To create a radial gradient you must also define at least two color stops. ### Syntax `background-image: radial-gradient(shape size…"
url: "https://apprentice.mn/docs/css-radial-gradients/"
updated: "2021-05-11"
category: CSS
---

# CSS Radial Gradients

> ## CSS Radial Gradients
>
>
>
> A radial gradient is defined by its center.
>
>
>
> To create a radial gradient you must also define at least two color stops.

### Syntax

     `background-image: radial-gradient(shape size at position, start-color, ..., last-color);`

By default, shape is ellipse, size is farthest-corner, and position is center.

 

**Radial Gradient – Evenly Spaced Color Stops (this is default)**

The following example shows a radial gradient with evenly spaced color stops:

           `#grad {
  background-image: radial-gradient(red, yellow, green);
}`

**Radial Gradient – Differently Spaced Color Stops**

The following example shows a radial gradient with differently spaced color stops:

          `#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}`

## Set Shape

The shape parameter defines the shape. It can take the value circle or ellipse. The default value is ellipse.

The following example shows a radial gradient with the shape of a circle:

          `#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}`

## Use of Different Size Keywords

The size parameter defines the size of the gradient. It can take four values:

- **closest-side**
- **farthest-side**
- **closest-corner**
- **farthest-corner**

###  

### Example

A radial gradient with different size keywords:

      `#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}`

## Repeating a radial-gradient

The repeating-radial-gradient() function is used to repeat radial gradients:

          `#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}`

## CSS Gradient Properties

The following table lists the CSS gradient properties:

| Property | Description |
| --- | --- |
| background-image | Sets one or more background images for an elemen |

        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-radial-gradients%2F&linkname=CSS%20Radial%20Gradients](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-radial-gradients%2F&linkname=CSS%20Radial%20Gradients)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-radial-gradients%2F&linkname=CSS%20Radial%20Gradients](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-radial-gradients%2F&linkname=CSS%20Radial%20Gradients)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-radial-gradients%2F&linkname=CSS%20Radial%20Gradients](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-radial-gradients%2F&linkname=CSS%20Radial%20Gradients)[https://www.addtoany.com/share](https://www.addtoany.com/share)