Gradient guide
About this radial gradient generator
Create a radial CSS gradient
A radial gradient begins at a centre point and blends outward. Change the colours and stop positions to create anything from a soft glow to a clearly defined circular shape.
Move the gradient focal point
Centre X moves the origin horizontally and Centre Y moves it vertically. An off-centre origin can place light behind a heading, highlight a product area or add asymmetry to a background.
Layer radial gradients for depth
A single radial gradient makes a focused glow. Add another transparent radial layer in a different position to create more natural lighting, then place a linear base beneath both.
Frequently asked questions
What is a radial gradient?
A radial gradient blends colours outward from a centre point in a circular or elliptical pattern.
Can I move the centre of a radial gradient?
Yes. The Centre X and Centre Y controls position its origin anywhere on the canvas.
Can radial gradients be layered?
Yes. Transparent radial layers can be stacked over other radial or linear gradients.