Skip to content
ToolQivo

Radial Gradient Generator

Build radial gradients with full control of shape and position.

Color Tools Reviews Free · no sign-up

The gradient

CSS 
The declaration appears here

Quick Tool Overview

The Radial Gradient Generator exposes every part of the syntax — shape, position, the four size keywords and any number of stops — with a live preview that makes the keywords obvious in about ten seconds.

What it does
Builds CSS radial gradients
You give it
Shape, position, size and colour stops
You get back
The declaration, with an OKLab version
Best for
Glows, spotlights, vignettes and hero washes
Color Tools Free, unlimited use No sign-up Runs in your browser

About the Radial Gradient Generator

A radial gradient radiates from a point rather than running in a direction, which makes it the right tool for glows, spotlights, vignettes and the soft background washes that sit behind a hero section.

It also has more knobs than a linear gradient, and they are the reason people give up on it. The shape can be a circle or an ellipse. The position can be anywhere, including outside the element. And the size keyword — closest-side, farthest-corner and the two in between — decides where the gradient finishes, which changes the result completely and is almost impossible to predict from the name alone.

This exposes all of them with a live preview, so the keywords become obvious in about ten seconds of clicking. Colour stops can be added, moved and given explicit positions, and the output includes a version using the modern in oklab interpolation, which keeps the middle of a two-colour gradient from going grey.

Key features of the Radial Gradient Generator

Size keywords made visible

closest-side, farthest-corner and the two between change the result completely and are impossible to guess from the names.

Position anywhere

Including outside the element, which is how an off-screen glow is done.

Circle or ellipse

Round whatever the container, or stretched to it — a one-word difference with a large effect.

OKLab interpolation

The in oklab version too, which stops a two-colour gradient going grey through the middle.

Presets that matter

Vignette, spotlight and soft background wash, ready to adjust.

How to use the Radial Gradient Generator

  1. 1

    Choose circle or ellipse

    A circle stays round; an ellipse stretches to the shape of the element.

  2. 2

    Position the centre

    Anywhere in the box, or outside it for an off-screen glow.

  3. 3

    Pick the size keyword

    Where the gradient ends. The preview makes the four options obvious.

  4. 4

    Add colour stops

    As many as you need, at explicit positions.

Frequently asked questions

They set where the gradient reaches 100%: closest-side stops at the nearest edge, farthest-side at the furthest, closest-corner and farthest-corner at those corners. farthest-corner is the default and is usually what you want.

Reviews of the Radial Gradient Generator

What people who use the Radial Gradient Generator think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the Radial Gradient Generator. It takes half a minute and no account.

Write the first review

More color tools