Radial Gradient Generator
Build radial CSS gradients — perfect for spotlight backgrounds, soft glows and depth effects.
Gradient stops
2/5/* Fallback for browsers that do not support gradients */ background-color: #4F46E5; /* Legacy WebKit */ background-image: -webkit-radial-gradient(center, circle, #4F46E5 0%, #EC4899 100%); /* Modern browsers */ background-image: radial-gradient(circle at center, #4F46E5 0%, #EC4899 100%);
Selected stop
0%Color stops
Presets
A radial gradient fades outward from a center point. The shape can be a circle (equal radius in every direction) or an ellipse (different horizontal and vertical radii), and the center can be placed anywhere in the box — top, bottom, off-center — which lets you create spotlight effects without animation. They are great for hero backgrounds, glow effects, dome-like depth and adding subtle dimension to flat UI without resorting to drop shadows.
The CSS syntax is more flexible than linear gradients because the shape and position combine in more ways. A circle at top makes a sun-like effect; an ellipse at bottom left feels like soft daylight from a window; a circle at the exact center with two dark stops creates a vignette frame. The keywords closest-side, closest-corner, farthest-side and farthest-corner control how far the gradient extends, which lets you tune whether the falloff happens inside the box (tight) or beyond it (soft).
A common pattern in modern landing pages is to layer two or three radial gradients on a single element using comma-separated background values. Each gradient is a soft glow in a different position and color, and the result is a rich, organic-feeling background that looks intentional rather than algorithmic. This is much cheaper than running a shader or generating an image and adapts cleanly to dark mode by swapping colors.
Frequently asked questions
When should I use a radial gradient instead of linear?+
Use radial when you want a focal point — a spotlight, a glow, a sun-like background or a vignette. Use linear when you want directional flow across a surface, like a sky-to-horizon hero or a sectioning background. The two combine well: a linear base layer with a radial accent on top can produce more interesting backgrounds than either alone.
What is the difference between circle and ellipse?+
A circle has equal radius in every direction; an ellipse can be wider than it is tall (or vice versa). For square or near-square containers, circle and ellipse look identical. For wide hero sections, ellipse spreads the gradient horizontally; circle confines it to the center. Default is ellipse, which adapts to box dimensions.
How do I create a spotlight effect?+
Use a radial gradient with a bright center color (often white or a warm tone at low alpha) and transparent edges, layered over a darker background. Place the center where you want the spotlight to land. For an off-center spotlight, use position keywords like <code>at top right</code> or pixel/percentage coordinates.
Can I layer multiple radial gradients?+
Yes — CSS lets you stack multiple gradients in a single background property using comma separation. Each is a separate radial layer with its own colors and position. Two or three soft glows in different colors and positions produce rich, modern backgrounds without external assets. Watch for performance on complex stacks.
What do closest-side and farthest-corner mean?+
These extent keywords control how far the gradient reaches. <code>closest-side</code> stops at the nearest edge — gradient is small and tight. <code>farthest-corner</code> stops at the farthest corner — gradient covers the whole box and beyond. closest-corner and farthest-side fall between. The default is farthest-corner, which gives smooth coverage in most cases.