What is the difference between circle and ellipse in radial-gradient?

circle produces a perfectly round gradient regardless of element dimensions. ellipse (the default) stretches to match the element's aspect ratio, producing an oval shape.

How do I position the centre of a radial gradient?

Use the at keyword: radial-gradient(circle at 30% 70%, red, blue) positions the centre at 30% from the left and 70% from the top.

Can I use a radial gradient for a glow effect?

Yes. Create a radial gradient from a bright colour at the centre to transparent at the edges: radial-gradient(circle at center, rgba(255,255,100,0.8) 0%, transparent 60%). Use it as a background-image over another background.

What are the size keywords for radial-gradient?

closest-side, closest-corner, farthest-side (default), and farthest-corner control how the gradient's ending shape is sized relative to the element edges.

How do I overlay a radial gradient on a background image?

Stack them: background: radial-gradient(...), url(image.jpg). The gradient renders on top. Use a semi-transparent gradient to let the image show through.

Free · Fast · Privacy-first

Radial Gradient CSS Generator

Radial gradients radiate outward from a central point — perfect for spotlight effects, soft glows, and circular colour transitions. FixTools lets you configure the shape, size, position, and colour stops of a CSS radial-gradient and generates the exact CSS code.

⚡ Use Tool Now How it works

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

⚡

Choose circle or ellipse shape

🔒

Set gradient centre position (x/y)

✨

Adjust colour stops and transition smoothness

CSS Tool

Gradient

All processing happens in your browser — your files are never uploaded to any server.

🚀Open Gradient

100% Free · No account · Works on any device

How to use this tool

💡

Configure your radial gradient settings. Example output: background: radial-gradient(circle at center, #f093fb 0%, #f5576c 50%, #4facfe 100%)

How It Works

Step-by-step guide to radial gradient css generator:

1
Open the gradient tool
Click "Open CSS Gradient Generator" and select the Radial Gradient type.
2
Choose shape
Select circle for a perfectly round gradient or ellipse to stretch the gradient to fit the element dimensions.
3
Set the centre position
Set the x/y position of the gradient origin. Default is center center. Move it to create off-centre glows or spotlight effects.
4
Add colour stops
Set your innermost colour first (0%) and outer colours last (100%). Add intermediate stops for complex effects.
5
Copy CSS output
Copy the background: radial-gradient(...) output and apply it to your element.