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

Next lesson: Conic gradient

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies