Tool
CSS gradient generator
Choose two colors and an angle to build a smooth linear gradient. Preview it live and copy clean CSS.
About CSS gradients
A linear gradient blends colors along a line set by an angle (0° points up, 90° points right). Gradients are great for hero backgrounds, buttons, and cards — but keep enough contrast for any text placed on top. Verify text legibility with the contrast checker.
Frequently asked questions
How do I make a CSS gradient?
Use background: linear-gradient(angle, color1, color2). This tool builds and copies that CSS for you.
Can I put text on a gradient?
Yes, but check contrast against the lightest and darkest parts of the gradient so text stays readable.