When is a radial gradient a better fit than a linear one?

Use radial when the emphasis is a point: a spotlight behind a headline, a circular badge, or a vignette that darkens the edges. Use linear when the change should run from one side of a rectangle to the other.

What is the difference between circle and ellipse?

A circle keeps a constant radius. An ellipse stretches to the box, so the same stops look different in a wide hero and a square card. Preview the shape in the component size you will ship.

How do color stops work on a radial gradient?

Stops are still positions along the gradient line, measured from the center toward the edge. 0% is the center. The same positioning rules in CSS Images Level 4 apply. See how to choose gradient color stops.

Do radial glows meet contrast requirements by themselves?

No. The ratio changes as the glow fades. Sample the text against the lightest and darkest pixels behind it with the contrast checker, and read the CSS gradients guide before you put a headline on the glow.

Radial Gradient Generator — Free CSS Tool

Gradient type

Color stops

Position: 0%

Position: 50%

Position: 100%

Presets

CSS

background: radial-gradient(circle, #5B21B6 0%, #7C3AED 50%, #C4B5FD 100%);
background: -webkit-radial-gradient(circle, #5B21B6 0%, #7C3AED 50%, #C4B5FD 100%);
background: radial-gradient(circle, #5B21B6 0%, #7C3AED 50%, #C4B5FD 100%);

Import colors from the palette generator. Bright RGB gradients may shift in CMYK print — verify before production.

Color tools

Palettes, gradients, accessibility checks, and print-ready conversions — all in one place.

View all tools →

How a radial gradient is built

radial-gradient() starts at a center and moves out. The ending shape is a circle or an ellipse. Circle keeps the color rings round. Ellipse stretches them to the box, so a wide section and a square button will not look like the same glow even with the same stops.

Stop positions are distances from the center. 0% sits on the center point. 100% sits on the ending shape. A transparent end stop should name the color you are fading, such as rgb(0 0 0 / 0), instead of the keyword transparent. The keyword still interpolates from a color, and the fade can pick up a cast you did not want.

A radial glow behind text is still a contrast problem. The center may be light while the edge is dark, or the reverse. Check both regions. If the headline crosses the whole glow, every region under the glyphs has to pass the contrast ratio you need.

Radial gradients are a screen treatment. A press does not reproduce a CSS glow as a continuous blend. If the same artwork is going to print, pick the flat colors that matter and check those, not a screenshot of the glow.

Compare this with the other shapes in the CSS gradient generator, including linear, radial, and conic. The CSS gradients guide covers syntax, and choosing color stops covers positions, hints, and hard edges. Pull seed colors from the palette generator or from a photo with palette from image.

FAQ

Frequently asked questions

Questions about radial CSS gradients and this generator.

When is a radial gradient a better fit than a linear one?: Use radial when the emphasis is a point: a spotlight behind a headline, a circular badge, or a vignette that darkens the edges. Use linear when the change should run from one side of a rectangle to the other.
What is the difference between circle and ellipse?: A circle keeps a constant radius. An ellipse stretches to the box, so the same stops look different in a wide hero and a square card. Preview the shape in the component size you will ship.
How do color stops work on a radial gradient?: Stops are still positions along the gradient line, measured from the center toward the edge. 0% is the center. The same positioning rules in CSS Images Level 4 apply. See how to choose gradient color stops.
Do radial glows meet contrast requirements by themselves?: No. The ratio changes as the glow fades. Sample the text against the lightest and darkest pixels behind it with the contrast checker, and read the CSS gradients guide before you put a headline on the glow.