radial-gradient() CSS Function

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The CSS radial-gradient() function is used to create a radial gradient background image. A radial gradient is a gradient that radiates out from a center point. Radial gradients can be used to create a variety of effects, such as buttons, backgrounds, and borders.

The radial-gradient() function takes four parameters:

shape: The shape of the gradient. This can be either circle or ellipse.
size: The size of the gradient. This can be either closest-side, closest-corner, farthest-side, or farthest-corner.
position: The position of the gradient. This can be any valid CSS position value, such as center, top left, or bottom right.
colors: The colors of the gradient. This is a list of color stops, which are pairs of a color and a percentage. The percentages represent the position of the color stop along the gradient.

The following is an example of a radial gradient:

background-image: radial-gradient(circle farthest-corner at center, red, yellow);

This will create a radial gradient that starts at the center of the element and radiates out to the edges. The gradient will start with the color red and then transition to the color yellow.

To add more color stops to the gradient, simply add them to the list of colors, separated by commas. For example, the following gradient will have three color stops, starting with red, then transitioning to yellow, and then transitioning to green:

background-image: radial-gradient(circle farthest-corner at center, red 50%, yellow 50%, green);

You can also use percentages to specify the position of the color stops. For example, the following gradient will have two color stops, with the first color stop at 25% and the second color stop at 75%:

background-image: radial-gradient(circle farthest-corner at center, red 25%, yellow 75%);

Radial gradients are a great for creating beautiful and eye-catching effects on your web pages.

Syntax

<radial-gradient> = radial-gradient(
  [ [ circle               || <length> ]                          [ at <position> ]? , |
    [ ellipse              || [ <length> | <percentage> ]{2} ]    [ at <position> ]? , |
    [ [ circle | ellipse ] || <extent-keyword> ]                  [ at <position> ]? , |
    at <position> ,
  ]?
  <color-stop> [ , <color-stop> ]+
)

/* where.. */
<extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side

/* and */
<color-stop> = <color> [ <percentage> | <length> ]?

Values

<position>The position of the gradient, interpreted in the same way as background-position or transform-origin. If unspecified, it defaults to center.
<shape>The gradient's shape. The value can be circle (meaning that the gradient's shape is a circle with constant radius) or ellipse (meaning that the shape is an axis-aligned ellipse). If unspecified, it defaults to ellipse.
<extent-keyword>
A keyword describing how big the ending shape must be. The possible values are:
- closest-side
- closest-corner
- farthest-side
- farthest-corner
<linear-color-stop>A color-stop's <color> value, followed by an one or two optional stop positions (either a <percentage> or a <length> along the gradient's axis). A percentage of 0%, or a length of 0, represents the center of the gradient; the value 100% represents the intersection of the ending shape with the virtual gradient ray. Percentage values in between are linearly positioned on the gradient ray. Including two stop positions is equivalent to declaring two color stops with the same color at the two positions.
<color-hint>The color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.

Example

HTML

<div class="radial">Radial gradient example.</div>

CSS

.radial {

    background: radial-gradient(yellow, green);

    color: white;

    padding: 30px;

    margin: 10px;

    height: 160px;

    font-size: 1.5em;

    text-align: center;

}

Result

Editor