Runs locally
CSS Gradient Generator
Build a linear gradient and copy the CSS.
background: linear-gradient(120deg, #ff6a00 0%, #101410 100%);
Export and import are available after you sign in. Sign in
The preview is the CSS you will copy.
About this tool
Create a linear gradient for a button, a hero section or a card. Choose two colors and the angle, and the live preview shows exactly the CSS you will copy.
How to use it
- 01
Pick the start and end colors.
- 02
Set the angle in degrees.
- 03
Copy the background CSS.
FAQ
Frequently asked questions
Which gradients can I make?
Two-color linear gradients at any angle.
Does it work in all browsers?
Yes. linear-gradient() is supported by every modern browser without prefixes.