CSS Linear Gradient Generator
A linear gradient is the quickest way to give a button, header or card some depth, but writing the code by hand is fiddly. Here you pick two colors from the color picker and set an angle between 0 and 360 degrees; the preview updates instantly and the box below always holds one ready CSS line: background: linear-gradient(...). Angles follow standard CSS: 0deg runs bottom to top, 90deg left to right, 180deg top to bottom. The copy button puts that line on your clipboard. This version builds two-color linear gradients only; for radial or multi-stop gradients, extend the generated line in your own CSS.
This tool runs entirely in your browser. No data is sent to any server.
How to use it
- 1
Choose the first and second color from the pickers.
- 2
Set the angle; 135 degrees is a good starting point for most cards and buttons.
- 3
Copy the `background: linear-gradient(...)` line into your stylesheet.
Frequently asked questions
How is the gradient angle interpreted?
The angle says which way the first color moves toward the second: 0deg bottom to top, 90deg left to right, 180deg top to bottom. For a diagonal gradient, land between those numbers; 135deg is the most common choice.
Can I add a third color?
This page builds two colors. Take the generated line into your CSS and add more stops with commas, for example linear-gradient(135deg, #8b5cf6, #06b6d4 50%, #22c55e).
Does the gradient code work in every browser?
Yes. linear-gradient is standard CSS and every current browser understands it without vendor prefixes; those were needed for very old browsers, not today’s.