What does this tool do?
The Gradient Generator lets you build linear, radial, and conic CSS gradients with a live preview. It gives designers and developers ready-to-use CSS for backgrounds, buttons, and card effects, with the result copyable in one click.
How to use it
- Adjust the values and options.
- See the result in the live preview.
- Copy the generated CSS/code into your project.
Color stops, angle and gradient types
Add as many color stops as you like, setting each one's color with the picker and its position with a 0–100% slider — stops re-sort automatically by position. Linear and conic gradients include a 0–360° angle slider, while radial draws as a circle. The output is a ready-to-paste declaration like 'background: linear-gradient(135deg, #3b82f6 0%, ...)' that updates instantly as you tweak.
Presets and practical uses
Start in one click from presets like Ocean, Sunset, Forest, Galaxy, Fire, and Rainbow, then fine-tune them. Use the generated CSS for hero sections, card backgrounds, button fills, or text masks. Conic gradients suit pie-chart-style visuals and loading indicators, while radial gradients are ideal for soft glow and spotlight effects behind content.
Frequently asked questions
What's the difference between linear, radial and conic gradients?
Linear blends colors along a straight line at a chosen angle; radial spreads outward in a circle from the center; conic rotates colors clockwise around a center point. Switch types in one click and compare them in the preview.
How many color stops can I add?
You need at least two stops and can add as many as you want — the Rainbow preset, for example, uses six. Each stop's position is set independently as a percentage.
Can I paste the generated code straight into my project?
Yes. The output is a valid CSS 'background' declaration, so you can drop it into any element's style or assign it to a class.
Is Gradient Generator free?
Yes. Gradient Generator and all 300+ tools on MagmaNex are completely free with no signup or account required.
Is my data safe?
Yes. Everything runs locally in your browser. The data you enter is never sent to a server, stored, or shared.
Does it work on mobile?
Yes. Gradient Generator works on phones, tablets and desktops — no app download needed.
🔒 Privacy: everything runs in your browser, your data is never sent to a server.