CSS Gradient Generator
Customize colors and angle to generate live CSS linear-gradient code.
Related Free Tools
About Free Online CSS Linear Gradient Generator
Design custom two-color CSS linear gradients with live preview and custom angle, then copy the ready-to-use CSS code.
How to Use
- Pick Color 1, Color 2, and set your desired Angle (0-360 deg).
- Preview the gradient live and click Copy CSS to copy the rule.
Key Features & Benefits
- Generates clean, modern
background: linear-gradient(...)CSS code. - Great for hero banners, buttons, cards, and landing page backgrounds.
Frequently Asked Questions
What angle gives a left-to-right gradient?
Set the angle to 90 degrees for a horizontal left-to-right gradient, or 180 degrees for top-to-bottom.
Set the angle to 90 degrees for a horizontal left-to-right gradient, or 180 degrees for top-to-bottom.
Does this CSS work in all modern browsers?
Yes, linear-gradient() is natively supported by Chrome, Firefox, Safari, Edge, and mobile browsers.
Yes, linear-gradient() is natively supported by Chrome, Firefox, Safari, Edge, and mobile browsers.