Questions tagged [radial-gradients]

Radial gradients are a linear interpolation between two or more colors based on the distance from the center of a circle or ellipse.

In radial gradients, the colors emerge from a single point and smoothly spread outward in a circular or elliptical shape unlike in linear gradients where it is from one end to another.

Radial Gradients in CSS

In CSS, a radial gradient can be created using the below syntax: (Source - W3C)

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> ]+
)
<extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side

Here is a sample rainbow generated using radial gradients:

.rainbow {
  height: 25vw;
  width: 50vw;
  background: -webkit-radial-gradient(50% 110%, ellipse, white 35%, violet 35%, violet 40%, indigo 40%, indigo 45%, blue 45%, blue 50%, green 50%, green 55%, yellow 55%, yellow 60%, orange 60%, orange 65%, red 65%, red 70%, white 70%);
  background: -moz-radial-gradient(50% 110%, ellipse, white 35%, violet 35%, violet 40%, indigo 40%, indigo 45%, blue 45%, blue 50%, green 50%, green 55%, yellow 55%, yellow 60%, orange 60%, orange 65%, red 65%, red 70%, white 70%);
  background: radial-gradient(ellipse at 50% 110%, white 35%, violet 35%, violet 40%, indigo 40%, indigo 45%, blue 45%, blue 50%, green 50%, green 55%, yellow 55%, yellow 60%, orange 60%, orange 65%, red 65%, red 70%, white 70%);
}

Useful Links/References:

• Radial Gradients - W3C Specification
• Radial Gradients - MDN
• Gradient Editor by ColorZilla