Radial Gradient Generator - CSS Tool Free

Frequently asked questions

How does a radial gradient differ from a linear one?

It radiates outward from a point rather than along an axis, so colours form rings. That makes it the right choice for spotlights, glows and soft vignettes, where a linear fade would look flat.

What do circle and ellipse do?

Circle keeps the gradient perfectly round regardless of the element's shape; ellipse stretches it to match the element's proportions. Ellipse is the default and usually looks more natural on a wide container.

Can I move the centre point?

Yes — the position controls where the gradient originates, and offsetting it is what makes an off-centre glow or a light source coming from one corner look convincing.

Pro tips

Add a middle colour stop when a two-colour gradient looks muddy in the centre — the dead zone is the interpolation path, not your colour choice.
Keep gradients subtle for large background areas; a strong one that looks striking in a swatch becomes overwhelming at full width.
Check any text sitting on a gradient against both its lightest and darkest points, since contrast that passes at one end can fail at the other.
Use CSS gradients rather than exported images wherever you can — they scale to any size, cost no extra request, and stay crisp on every display.
Set an explicit angle rather than relying on the default, so the gradient does not reorient unexpectedly when a container changes shape.

About CSS Gradient Generator

Add and drag colour stops, set the angle, and switch between the three gradient types while watching the result, then copy CSS ready to paste into a stylesheet. Conic gradients in particular are far quicker to dial in by eye than by hand.

Create a CSS radial gradient with multiple colour stops and a live preview, then copy clean, unprefixed CSS. Everything renders in your browser.

This CSS gradient generator lets you design linear, radial and conic gradients visually and copy the exact CSS to paste into any project. Add as many colour stops as you like, pick each colour, drag its position along the track, and set the angle — the live preview updates as you go, so you can dial in the look before touching your stylesheet.

Gradients are one of the easiest ways to add depth to buttons, hero sections and backgrounds without images, which keeps pages fast. The output is plain CSS you can paste anywhere — no build step, no library, and nothing that has to stay in sync.

The three gradient types answer different questions. A linear gradient interpolates along a straight axis at whatever angle you set, which suits backgrounds and buttons. A radial gradient spreads outward from a point and is what you want for a glow or a spotlight. A conic gradient sweeps around a centre, which is how pie charts, colour wheels and angular borders are built in pure CSS — and it is by far the hardest of the three to predict without seeing it, which is why dialling it in visually saves the most time.

One detail catches people out in production: gradients interpolate through a colour space, and the default sRGB path between two saturated colours can pass through a desaturated grey band in the middle. A blue-to-yellow gradient is the classic example, sagging through a muddy region rather than staying vivid. Adding an intermediate colour stop steers the path and removes the band, which is usually quicker than reaching for a wider-gamut colour space that older browsers may not support.

Common use cases

Creating a spotlight or glow effect behind a hero element
Building a soft vignette over an image
Designing a subtle background without exporting a raster image

How it comparesFigma and other design tools build gradients visually and then require translating the result into CSS by hand. Copying working CSS directly removes that step, which matters most for conic gradients where the hand-written syntax is least intuitive.