Gradient Generator
Generate beautiful CSS linear gradients
About Gradient Generator
CSS gradients add depth and visual interest to web designs without any images. This free CSS Gradient Generator makes it easy to create beautiful linear gradients — pick two colors, set the angle, and instantly get the CSS code ready to paste into your stylesheet. Perfect for button backgrounds, hero sections, card designs, banners and any UI element that needs a professional color transition.
How to Use Gradient Generator
- 1Pick your start color using the first color picker.
- 2Pick your end color using the second color picker.
- 3Adjust the gradient angle using the angle slider (0°–360°).
- 4Copy the generated CSS code and paste it into your stylesheet.
Common Use Cases
Gradients with a 135° angle (top-left to bottom-right) tend to look the most professional and modern. Avoid high-contrast gradients for text backgrounds — they hurt readability.
⭐ Popular Free Tools
Frequently Asked Questions
What is the CSS syntax for a linear gradient?
The CSS syntax is: background: linear-gradient(angle, color1, color2). Example: background: linear-gradient(135deg, #667eea, #764ba2). You can also add multiple color stops: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f64f59 100%).
What is the difference between linear-gradient and radial-gradient?
Linear gradients transition colors along a straight line at a specific angle. Radial gradients transition colors outward from a center point in a circular or elliptical pattern. Linear gradients are more common for backgrounds; radial gradients are useful for spotlight effects and circular designs.
Can I use CSS gradients as text color?
Yes. To apply a gradient to text in CSS: set background: linear-gradient(135deg, #color1, #color2), then add -webkit-background-clip: text and -webkit-text-fill-color: transparent (with the non-prefixed background-clip: text for modern browsers). This clips the gradient to the text shape.
What CSS gradient angle should I use for a horizontal gradient?
0° or 360° gives a bottom-to-top gradient. 90° gives left-to-right. 180° gives top-to-bottom. 270° gives right-to-left. 45° gives top-left to bottom-right. The most common professional angle is 135° (top-left to bottom-right diagonal).