Ready-to-use CSS for the gradient you build.

Can I use more than two colours?

Yes. Add multiple colour stops for richer gradients.

You can craft common gradient types and control their direction.

Gradient Generator

DESIGNFREE · NO SIGNUP

Create and export CSS gradients

background: linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%);

Gradient Generator lets you design CSS gradients visually and export the code. Adjust colours, direction and stops, then copy ready-to-use CSS.

What does it export?: Ready-to-use CSS for the gradient you build.
Can I use more than two colours?: Yes. Add multiple colour stops for richer gradients.
Linear or radial?: You can craft common gradient types and control their direction.
Is it free?: Yes, free with no sign-up.