Gradient Generator
Creates CSS linear-gradient code from two colors and a direction.
Lilu Baba's Gradient Generator builds ready-to-paste CSS linear-gradient code with a live visual preview as you adjust colors and direction.
How to use this tool
- Pick a start and end color.
- Choose a direction.
- The CSS gradient code and live preview update instantly.
FAQ
Gradient Generator — frequently asked questions
This tool generates linear gradients; radial-gradient() uses a different CSS syntax not covered here.
This tool supports two colors; CSS gradients can technically support more color stops if you edit the generated code manually.