Skip to content

Radial Gradient Maker

DesignGradients, Patterns and Effects

Hex, 3 or 6 digits.

Colour stops
Ending shape
Size keyword
radial-gradient() value —
CSS declaration with fallback
—
Colour stops
—

Pick a centre colour, an edge colour, a shape, a size keyword and where the centre sits, and the maker writes the radial-gradient() value. For red to blue as a centred circle it gives radial-gradient(circle at center, #ff0000 0%, #0000ff 100%), ready to paste into a background-image rule.

About this tool

Front-end developers and designers reach for radial gradients for spotlights, vignettes, glowing buttons and soft hero backgrounds, but the syntax packs shape, size, position and colour stops into one line that is easy to get out of order. This maker assembles that line from a few controls and writes a full declaration with a solid background colour first, so a browser that ignores the gradient still paints something sensible. Short hex codes such as #f90 are expanded to six digits, and a third colour can be placed anywhere between 1% and 99% of the radius. It covers the keyword sizes and the nine named positions only; for pixel radii, percentage offsets or repeating gradients, edit the generated value by hand.

How to use it

  1. Enter the colours

    Type hex codes for the centre and edge colours; three-digit codes are accepted.

  2. Add a middle stop if needed

    Choose Three colours to reveal a middle colour and a slider for where it sits.

  3. Set shape, size and position

    Pick circle or ellipse, one of the four size keywords, and a named centre position.

  4. Copy the CSS

    Copy the radial-gradient() value or the full declaration with its solid fallback.

Examples

Red centre fading to blue

Centre colour
#ff0000
Edge colour
#0000ff
Colour stops
Two colours
Ending shape
Circle
Size keyword
Farthest corner
Centre position
Center

Result radial-gradient() value: radial-gradient(circle at center, #ff0000 0%, #0000ff 100%)
CSS declaration with fallback: background: #ff0000; background-image: radial-gradient(circle at center, #ff0000 0%, #0000ff 100%);
Colour stops: 2

  1. Ending shape: circle, sized to the farthest corner (the CSS default, so it is omitted).
  2. Centre: at center.
  3. Colour stops: #ff0000 0%, #0000ff 100%.
  4. A solid fallback background of #ff0000 is placed first for very old browsers.

A circle centred on the element, reaching the farthest corner, which is the CSS default size and so is left out.

Glow from the top-left corner

Centre colour
fff
Edge colour
#333333
Colour stops
Three colours
Middle colour
#f90
Middle stop position
40
Ending shape
Ellipse
Size keyword
Closest side
Centre position
Top left

Result radial-gradient() value: radial-gradient(ellipse closest-side at top left, #ffffff 0%, #ff9900 40%, #333333 100%)
CSS declaration with fallback: background: #ffffff; background-image: radial-gradient(ellipse closest-side at top left, #ffffff 0%, #ff9900 40%, #333333 100%);
Colour stops: 3

  1. Ending shape: ellipse, sized to closest-side.
  2. Centre: at top left.
  3. Colour stops: #ffffff 0%, #ff9900 40%, #333333 100%.
  4. A solid fallback background of #ffffff is placed first for very old browsers.

Short hex codes are expanded, and an orange middle stop at 40% sits between white and charcoal.

How it is calculated

radial-gradient(shape [size] at position, colour1 0%, [colour2 m%,] colourN 100%)

shape
circle (equal radii) or ellipse (radii follow the box proportions)
size
where the 100% ring ends: farthest-corner (default), farthest-side, closest-corner or closest-side
position
the gradient centre, as a keyword pair such as top left
m
the middle stop position as a percentage of the radius

The value follows the CSS Images Module Level 3 grammar. Because farthest-corner is the default size, it is omitted from the output to keep the code short. Colour stops run from 0% at the centre to 100% at the ending shape; anything beyond the ending shape takes the last colour.

When not to use it

  • For a gradient that runs in a straight line across an element, use a linear gradient instead.
  • For rings that repeat outward, you need repeating-radial-gradient, which this maker does not write.

Common mistakes

  • Expecting closest-side to fill the box; past the ending shape the edge colour simply continues.
  • Writing the position before the shape, which makes the whole declaration invalid.
  • Using an ellipse on a square element and wondering why it looks like a circle.

Frequently asked questions

What is the difference between circle and ellipse?

A circle has the same radius in both directions. An ellipse stretches to match the element's proportions, so on a wide banner it becomes a flat oval. On a square element the two look identical.

Why is farthest-corner missing from the code?

It is the default size in the CSS specification, so radial-gradient(circle at center, …) already reaches the farthest corner. Leaving it out keeps the value shorter without changing how it renders.

Do I still need a -webkit- prefix?

No. Unprefixed radial-gradient() with the at keyword has worked in every major browser since about 2013, including Safari 6.1 and later. The solid background line covers anything older.

Can I use colour names or rgba values?

This maker takes hex codes only, so every value it writes is predictable. After copying, you can replace any hex code with a named colour, rgb(), hsl() or a value with transparency.

How do I make a vignette effect?

Use a transparent or light centre, a dark edge, an ellipse shape and the farthest-corner size, then layer it over a photo with a second background image. Moving the middle stop outward keeps more of the photo clear.

What does the middle stop percentage measure?

It is the distance from the centre to the ending shape. At 40%, the middle colour is fully reached four tenths of the way out, and it blends into the edge colour over the remaining 60%.

Cite this tool

Using this tool in an assignment, article or report? Copy a citation, or a link for your website.

APA

Tools Directory Editorial Team. (2026, October 26). Radial Gradient Maker. Tools Directory. Retrieved October 26, 2026, from https://tools.milunir.com/design/gradients-patterns-and-effects/radial-gradient-maker/

MLA

Tools Directory Editorial Team. “Radial Gradient Maker.” Tools Directory, 26 Oct. 2026, https://tools.milunir.com/design/gradients-patterns-and-effects/radial-gradient-maker/. Accessed 26 Oct. 2026.

Chicago

Tools Directory Editorial Team. “Radial Gradient Maker.” Tools Directory. Last modified October 26, 2026. Accessed October 26, 2026. https://tools.milunir.com/design/gradients-patterns-and-effects/radial-gradient-maker/.

Link<a href="https://tools.milunir.com/design/gradients-patterns-and-effects/radial-gradient-maker/">Radial Gradient Maker – Tools Directory</a>