CSS gradient generator
Pick two colors and an angle and copy the CSS gradient code.
CSS gradient generator
This tool creates linear CSS gradients from two colors and an angle, with a live preview and the background code ready to copy. It all runs in your browser.
How linear-gradient works
background: linear-gradient(angle, color1, color2);
The angle sets the direction: 0° bottom to top, 90° left to right, 180° top to bottom. Colors can be HEX, RGB or HSL.
Tips
- For subtle gradients, use two shades of the same color.
- You can add more color stops manually in the CSS.
- Combine with
background-sizefor animated effects.
Frequently asked questions
Does it work in all browsers? Yes, linear-gradient has had universal support for years.
Radial or conic? This version makes linear ones; radial/conic use radial-gradient/conic-gradient.