How to make a radial gradient
- Radial is already selected. Choose a circle or ellipse shape and where the centre should be.
- Set the colors and drag their position sliders. The first color is in the centre and the last at the edge.
- Copy the CSS or download a PNG.
Radial gradient syntax
radial-gradient(circle at center, #fff 0%, #000 100%). The shape is a circle or an ellipse (the default, which stretches to the element's proportions). The position after at moves the centre: at top left makes a corner glow, at 50% 0% a light from above. By default the gradient extends to the farthest corner; color stops in percentages are measured along that radius.
Radial gradients are perfect for spotlights behind a product, soft vignettes, glowing buttons and background "blobs". Layer several semi-transparent radial gradients with commas to create aura-style backgrounds; the mesh gradient generator does this for you. A hard stop (two colors at the same position) draws a solid circle, which is how CSS-only dots and rings are made.
FAQ
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 width and height.
How do I make a vignette?
Use transparent in the centre and a dark, semi-transparent color at the edge, layered over your background.
Can I move the center off-screen?
Yes, with positions like "at 120% 50%" in the CSS. The generator offers the common positions.