Radial gradient CSS generator
Drag the centre on the proof, choose circle or ellipse and a size keyword, and copy the radial-gradient() — ideal for glows, spotlights and vignettes.
#ff2d87 · rgb(255 45 135) · hsl(334 100% 59%) · oklch(66.1% 0.245 1.9)
Contrast audit worst 1.73:1
Range across the gradient: 1.73 to 3.51:1. Weakest point at 100% (#ffb800). Fails AA somewhere — text over that area will be hard to read.
Nearest text colour that passes 4.5:1 across the whole gradient:
Export
.gradient {
background: linear-gradient(135deg, #ff2d87 0%, #ff457b 8.3%, #ff5671 16.7%, #ff6469 25%, #ff7061 33.3%, #ff7b5b 41.7%, #ff8555 50%, #ff8e4f 58.3%, #ff9749 66.7%, #ff9f43 75%, #ffa83a 83.3%, #ffb02b 91.7%, #ffb800 100%);
background: linear-gradient(in oklch 135deg, #ff2d87 0%, #ffb800 100%);
}The first line is a pre-blended fallback for browsers without “in oklch” support (pre-2023); the second line is the native version.
How big is a radial gradient?
A radial gradient grows from its centre until it hits the ending shape. Four keywords decide that shape’s size, and each measures from the centre to a different part of the box: the nearest side, the nearest corner, the furthest side or the furthest corner.
For an ellipse, the corner keywords keep the box’s aspect ratio and scale up by √2 so the outline passes exactly through the corner. Move the centre off-middle and watch how closest-side shrinks while farthest-corner grows.
The dashed outline is the ending shape — where the 100% stop lands. On a 320×200 box with the centre at 30% 40% it measures 317 × 170px (radii). Drag inside the box to move the centre.
radial-gradient(ellipse farthest-corner at 30% 40%, #ffe259, #ff2d87 70%, #302b63)radial-gradient() recipes
/* Spotlight */ background: radial-gradient(circle at 50% 0%, #fff6 0, #0000 60%), #111; /* Vignette */ background: radial-gradient(ellipse closest-corner, #0000 60%, #0009), url(photo.jpg) center / cover; /* Dot pattern */ background: radial-gradient(circle, #1d1418 1.5px, #0000 2px) 0 0 / 16px 16px;
Questions
What is the syntax of radial-gradient()?
radial-gradient([<shape> || <size>]? [at <position>]? [in <colour-space>]?, <colour-stops>). Example: radial-gradient(circle at 30% 20%, #ffe259, #ff2d87). Shape defaults to ellipse, size to farthest-corner and position to center.
What is the difference between circle and ellipse?
An ellipse stretches to the box’s aspect ratio, so on a wide banner it becomes a wide oval. A circle keeps equal radii. Use circle for glows and spotlights that should look round at any size.
What do closest-side and farthest-corner mean?
They set where the 100% stop lands. closest-side ends the gradient at the nearest edge; farthest-corner (the default) reaches the corner furthest from the centre. The explainer on this page draws the resulting ending shape.
Can I give a radial gradient an exact size?
Yes: radial-gradient(circle 120px at center, …) for a circle, or radial-gradient(200px 80px at center, …) for an ellipse. Percentages are allowed for ellipses only.
How do I make a soft glow behind content?
Use a circle that fades to a transparent version of the same colour: radial-gradient(circle closest-side, rgb(255 45 135 / .55), rgb(255 45 135 / 0)). Layer it over a solid background with a comma-separated list.