Background
radial-gradient()
radial-gradient() creates an image of colors spreading outward from a center as a circle or an ellipse. Use it with properties that accept an image, such as background or background-image.
Syntaxradial-gradient( …
radial-gradient(
[ <radial-shape> || <radial-size> ]? [ at <position> ]? ,
<color-stop-list>
)
<radial-shape> = circle | ellipse
<radial-size> = <radial-extent>
| <length [0,∞]> | <length-percentage [0,∞]>{2}
<radial-extent> = closest-corner | closest-side
| farthest-corner | farthest-sidePreview
Presets
Drag the bottom-right corner to resize
Code
.box {
background: radial-gradient(
circle at 30% 30%,
#88d1c7,
#77a7d7 50%,
#eaac3a
);
}Controls
radial-gradient()
repeating-
radial-shapecircle
radial-sizefarthest-corner
at <position>30% 30%
Click or drag inside the box to move the center
Horizontal
Vertical
color-stop-list
Drag the markers to move stops
#88d1c7
Color
Position
#77a7d7 50%
Color hint (midpoint from previous)
Color
Position
Second position
#eaac3a
Color hint (midpoint from previous)
Color
Position
About
Shape and size
- The shape is
circleorellipse. When omitted, the size decides it: one length means a circle, two mean an ellipse, anything else an ellipse. - The size sets where
100%of the color stops lands. The keywords measure from the center to the closest or farthest side or corner. Without a size you getfarthest-corner. - With lengths, a circle takes a single radius and no
%. An ellipse takes horizontal and vertical radii, where%is relative to the element’s width and height.
Center
Put the center after at, written like background-position. It defaults to center. Moving the center toward an edge shrinks the shape for “closest” keywords such as closest-side and grows it for farthest-corner. Drag inside the box in the controls to try it.
Color stop positions
0%is the center and100%is the edge of the shape set by the size. Beyond it, the last color fills the rest.- Omitted positions, double positions, and color hints work as in
linear-gradient(). A position smaller than the previous one gives you crisp rings.
repeating-radial-gradient()
Repeats the span from the first to the last stop to draw concentric rings. For example, repeating-radial-gradient(circle, #88d1c7 0 10px, #77a7d7 10px 20px) gives you 10px-wide striped rings.