Pick two colours
Choose start and end colours.
Code & Data Tool
CSS Gradient Generator
Generate CSS linear gradient code from two colors.
Loading workspace...
About this tool
What is CSS Gradient Generator?
CSS Gradient Generator creates linear-gradient code from two colours, ready to paste into a stylesheet.
Useful when you need to
- Make a hero background
- Style a button
- Learn gradient syntax
How to use
How to use CSS Gradient Generator
01 02 Adjust
Set the settings available.
03 Preview
Check the gradient.
04 Copy
Copy the CSS.
Tips
Get better results
- Keep text readable over the gradient.
- Test it at different screen sizes.
FAQ
Frequently asked questions
Does it support more than two colours?
This tool uses two colours.
Is it private?
Yes.
Which browsers support it?
All modern browsers.
More practical guides · File handling and privacy · Report an incorrect instruction