Radial gradient
Learn circular gradients with radial-gradient().
What is a radial gradient?
A radial gradient blends colors from a center point outward, in a circle or ellipse shape. You write it with the radial-gradient() function. radial-gradient(white, navy) gives a white center fading into navy at the edge.
The most common use is a light glow on a button or a halo behind an icon. Whenever you want a smooth blend from the middle outward, a radial gradient is the right choice.
Shape and position
You set the radial gradient's shape as the first argument: circle or ellipse. A circle is a perfect round shape; an ellipse stretches to match the element's box.
After the shape, you can give the center position with at. circle at top left produces a circle radiating from the top-left corner. Without a position, the browser centers it.
Exercise Add an icon halo effect
Define a background for the .icon-glow selector. The value must be a radial-gradient() function starting with circle at center, then listing rgba(255,255,255,0.9) and transparent separated by a comma. Use only the background property.
Show example solution
/* icon halo effect */
.icon-glow {
background: radial-gradient(circle at center, rgba(255,255,255,0.9), transparent);
}Test yourself
-
Which is a valid radial-gradient() form?
- radial-gradient to top white navy
- radial-gradient(rotate(45), white, navy)
- radial-gradient(circle at center, white, navy)
- radial-gradient(white, navy;)
Show answer
radial-gradient(circle at center, white, navy) — Correct. radial-gradient() takes shape and position first, then color stops.
-
Write the radial gradient as a circle
background: radial-gradient(____, white, navy);Show answer
background: radial-gradient(circle, white, navy); -
Match each keyword to its meaning
- circle
- Perfect round shape
- ellipse
- Stretched to the box
- at center
- Middle of the element
- farthest-corner
- Up to the farthest corner