CSS Radial Gradient Generator

What radial-gradient() does

A radial gradient spreads colors outward from a center point, as a circle or an ellipse. It's the gradient behind glows, spotlights, vignettes and the soft arches you often see behind a hero section.

How to use the radial gradient generator

1. Choose Circle or Ellipse as the shape.
2. Move the center with Center X and Center Y. For an ellipse, Size sets how large it is.
3. Set each color stop's color and position, or use "Add a new color stop" for more.
4. Or open the presets for ready-made arches.
5. Copy the CSS from the code panel.

radial-gradient() syntax

background: radial-gradient(circle at 50% 100%, #6366f1 0%, #312e81 60%, #000000 100%);

• Shape. circle or ellipse. Without one, the gradient is an ellipse.
• Size. A keyword: closest-side, closest-corner, farthest-side, or the default, farthest-corner. Or exact radii: one length for a circle (percentages aren't allowed), or two lengths or percentages for an ellipse, horizontal then vertical.
• Position. at followed by a position, written like background-position. The default is the center.
• Color stops. 0% is the center and 100% is the edge of the shape.

Circle vs ellipse

A circle has the same radius in every direction, so it stays round in a wide box. An ellipse stretches with the box by default, so it fills wide and tall elements evenly. Use a circle for round glows and arches, and an ellipse for vignettes that follow the shape of the section.

Making an arch

Put the center of a circle on the bottom edge with at 50% 100%, and end on the background color. Only the top half of the circle shows, as an arch of light rising from the bottom of the box. The example above draws one, and the generator's presets are variations on it.

For straight or angled gradients, and conic ones, use the CSS gradient generator. To add depth with a shadow instead, try the CSS box shadow generator.

Frequently asked questions