径向梯度 | radial-gradient()

radial-gradient()

The radial-gradient() CSS function creates an <image> which represents a progressive transition between two or more colors radiating from an origin (the center of the gradient). Its shape may be a circle or an ellipse.

/* A gradient at the center of its container,
   starting red, changing to blue, and finishing green */
radial-gradient(circle at center, red 0, blue, green 100%)

As with any gradient, a radial gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element it applies to.

To create a radial-gradient that repeats so as to fill its container, use the repeating-radial-gradient() function instead.

Usage note: Because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used. For this reason, radial-gradient() won't work on background-color and other properties that use the <color> data type.

Composition of a radial gradient

A radial gradient is defined by a center point, an ending shape, and two or more color-stop points.

To create a smooth gradient, the radial-gradient() function draws a series of concentric shapes radiating out from the center to the ending shape (and potentially beyond). The ending shape may be either a circle or an ellipse.

Color-stop points are positioned on a virtual gradient ray that extends horizontally from the center towards the right. Percentage-based color-stop positions are relative to the intersection between the ending shape and this gradient ray, which represents 100%. Each shape is a single color determined by the color on the gradient ray it intersects.

Syntax

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 keywords are:

Note: Early implementations of this function included other keywords (cover and contain) as synonyms of the standard farthest-corner and closest-side, respectively. Use the standard keywords only, as some implementations have already dropped those older variants.

<color-stop>A color-stop's <color> value, followed by an optional stop position (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.

Formal syntax

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> ]? 

Example 1

Using the following CSS we can get an ellipse background in the farthest-corner at 45px 45px, changing color from Turquoise (#00FFFF), to White, to Blue (#0000FF):

body {
  width: 100vh;
  height: 100vh;
  background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%
} 

Example 2

This will produce an ellipse background in the farthest-corner at 470px 45px, changing color from Yellow (#FFFF80), to Pale Maroon, to Pale Blue (#E6E6FF):

body {
  width: 100vh;
  height: 100vh;
  background-image: radial-gradient(ellipse farthest-corner at 470px 47px , #FFFF80 20%, rgba(204, 153, 153, 0.4) 30%, #E6E6FF 60%
}

Example 3

This will produce an ellipse background in the farthest-corner at 45px 45px, changing color from Red (#FF0000) to Blue (#0000FF):

body {
  width: 100vh;
  height: 100vh;
  background-image: radial-gradient(farthest-corner at 45px 45px , #FF0000 0%, #0000FF 100%
}

Example 4

This will produce a fuzzy circle with a 16px radius:

body {
  width: 100vh;
  height: 100vh;
  background-image: radial-gradient(16px at 60px 50% , #000000 0%, #000000 14px, rgba(0, 0, 0, 0.3) 18px, rgba(0, 0, 0, 0) 19px 
} 

Specifications

浏览器兼容性