Radial Gradient

Radial Gradient Generator

Create circular gradients that radiate from a center point

Export Code

background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);

Preset Gradients

What is a Radial Gradient?

Radial gradients emanate from a center point, creating circular or elliptical color transitions. Unlike linear gradients that flow in one direction, radial gradients expand outward like ripples in water—ideal for spotlights, glows, and organic shapes.

The gradient's shape can be circular (equal radius) or elliptical (stretched to fit the container). You control where the center point sits and how the gradient extends to the edges.

Why Use Radial Gradients?

Radial gradients excel at creating natural-looking effects. Spotlight effects draw attention to specific content. Glow effects add depth behind buttons or cards. Vignette overlays darken edges for dramatic hero images.

They're also essential for creating circular UI elements without images—loading indicators, progress rings, and decorative orbs that scale perfectly at any size.

How It Works

The syntax specifies shape, size, and position:

background: radial-gradient(shape size at position, colors...);

Shape is "circle" or "ellipse" (default). Size keywords include closest-side, farthest-corner. Position uses x/y coordinates or keywords like "center" or "top right".

Our generator visualizes these options. Drag the center point, toggle shapes, and see changes instantly.