Choose colors and direction to generate a CSS linear-gradient. Preview updates live. Copy the CSS when done. Runs in your browser.
0%
100%
background: linear-gradient(to right, #3b82f6, #8b5cf6);
About CSS Gradient Generator
This tool builds a CSS linear-gradient from your chosen direction and colors. You can add multiple color stops. The preview and CSS update as you change options. Copy the snippet into your stylesheet.
How to use
- Select direction (e.g. to right, 45deg).
- Pick colors with the color picker or enter hex. Add more colors if needed.
- Copy the generated CSS and paste it into your project.
Frequently Asked Questions
Can I add more than two colors?
Yes. Use Add color to add stops. You can reorder or remove them. Each stop can have a position (e.g. 50%).
Is my gradient sent to a server?
No. The CSS is built in your browser.
What browsers support linear-gradient?
All modern browsers support linear-gradient. The tool outputs standard CSS; add vendor prefixes if you need older support.