radial-gradient() CSS Function

Description

The radial-gradient() CSS function adds a radial gradient to the background of an element. Radial in principle are similar to linear gradients, but one color does not change to another along a straight line, but like circles on water around a point.

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

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

.radial {

    background: radial-gradient(yellow, green);

    color: white;

    padding: 30px;

    margin: 10px;

    height: 160px;

    font-size: 1.5em;

    text-align: center;

}

Browser Support

Desktop
10	12	26	16	12.1	6.1
Tablets / Mobile
≤37	26	16	12.1	6.1	Yes

Last updated by CSSPortal on: 1st December 2019