CSS Gradient Generator
Pick two colors and a direction to generate CSS gradient code with a live preview.
1
2
Result
background: linear-gradient(to right, #3b82f6, #ec4899);
Use Cases
- Generate background gradient CSS
- Debug gradient colors
- Copy gradient code to your project
How to Use
Use the workspace above to type, paste, choose, or drop content and get the result immediately. Files and text stay local in your browser by default.
FAQ
Which gradient types are supported?
Linear gradients with angle or direction keywords.
Can I copy the code?
Yes. The result area provides one-click copy for the CSS code.