Gradient Generator

Create CSS gradients visually

How to use

1. Pick your colours and adjust the gradient direction.
2. Preview the gradient live.
3. Copy the ready-to-use CSS background code.

Why use this tool

• Live preview: See your gradient update instantly as you tweak colours and angle.
• Copy-paste CSS: Outputs valid linear-gradient (or radial) CSS for your stylesheet.
• 100% private: Everything runs in your browser. Your data is never uploaded to a server, so it's safe for confidential content.

Frequently asked questions

What CSS does it generate?

Standard linear/radial-gradient background values that work in all modern browsers.

Can I use more than two colours?

Yes — add multiple colour stops to create richer gradients.

Is it private?

Yes. The gradient and code are generated in your browser.

Back to all tools