Conic Gradient Generator
Build conic gradients — pie charts, colour wheels and sweeps.
Radial Gradient Generator
Build radial gradients with full control of shape and position.
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
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
Choose circle or ellipse
A circle stays round; an ellipse stretches to the shape of the element.
-
2
Position the centre
Anywhere in the box, or outside it for an off-screen glow.
-
3
Pick the size keyword
Where the gradient ends. The preview makes the four options obvious.
-
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.
Circle for a glow or a spotlight that should stay round whatever the element size. Ellipse — the default — for a background wash that should stretch with its container.
A radial gradient from transparent in the middle to a dark colour at the edge, with closest-side so it reaches the sides rather than the corners. The generator has it as a preset.
Because a smooth ramp over a large area crosses fewer than 256 distinct values, so the steps become visible. Add a very subtle noise overlay, or use a slightly larger colour difference across the ramp.
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
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 reviewMore color tools
LCH Color Converter
Convert LCH to HEX and RGB — LAB in polar form, as CSS uses it.
APCA Contrast Checker
Score a colour pair with APCA, the contrast model behind WCAG 3.
Alpha Blend Calculator
Work out the solid colour a translucent layer really produces.
HEX to Decimal Color
Convert a HEX colour to the integer forms Android, Java and Unity want.
Text Color on Background
Work out whether black or white text belongs on any colour.
HEX to SwiftUI Color
Turn a HEX code into SwiftUI Color, UIColor and NSColor code.
Color Temperature Converter
Convert colour temperature in kelvin to an RGB colour.