CSS Linear Gradient Builder
Build and preview a two-color CSS gradient with angle and stops.
Runs in your browser. Nothing you enter is sent to our servers.
Result
Enter your details and select Run tool.
How to use this tool
Choose two colors, a gradient angle and start and end stops. The result is a complete CSS background declaration. Input colors are validated as 3- or 6-digit HEX to avoid invalid CSS values; the preview mirrors the generated declaration.
Questions and answers
What does the angle mean?
0deg points upward and 90deg points right in CSS linear-gradient syntax.
Can I add a third color stop?
This compact builder produces two stops. Extend the copied CSS manually if you need more.