CSS radial gradient generator
Make a radial gradient that spreads out from a point: choose a circle or ellipse, move the centre, add colour stops and set their opacity. The preview updates live, and the CSS comes ready to paste with a fallback colour for older browsers.
How to use the CSS Gradient Generator
- 1Pick the gradient type: linear, radial or conic.
- 2Edit the colour stops: change a colour, move its position, set its opacity, or add and remove stops.
- 3Set the angle for linear and conic gradients, or the shape and centre for radial ones.
- 4Copy the CSS and paste it into your stylesheet.
Frequently asked questions
What is the difference between circle and ellipse in a radial gradient?
A circle spreads evenly in every direction. An ellipse, the default, stretches to the shape of the element, so it is wider on a wide box and taller on a tall one.
How do I make a spotlight or glow effect in CSS?
Use a radial gradient from a light colour at the centre to a transparent stop around 60–70%, over a dark background. Move the centre to place the glow.
How do I move the centre of a radial gradient?
Add an "at x% y%" position, such as radial-gradient(circle at 20% 30%, …). Drag the centre sliders here and the CSS is updated for you.
Related free tools
All tools- CSS Gradient GeneratorLinear, radial and conic CSS gradients with a live preview.
- CSS Box Shadow GeneratorLayered CSS box shadows with a live preview, ready to copy.
- Colour Contrast CheckerWCAG 2.2 AA and AAA contrast checks with a passing colour suggestion.
- Colour Picker From ImageClick any pixel to get its HEX, RGB and HSL, plus the top colours.
- HTML, CSS & JS MinifierMinify HTML, CSS and JavaScript safely.
Then schedule it with Join Postly
Plan, publish and track your posts on every network from one calendar. Free plan, no credit card.