Linear Gradient Generator
Create beautiful linear CSS gradients with any angle and unlimited color stops. Live preview updates as you edit — copy production-ready CSS with one click.
Color Stops
CSS Code
background: linear-gradient(135deg, #155EEF 0%, #7C3AED 100%);
What Is a Linear Gradient?
A linear gradient transitions between colors along a straight line at a specified angle. It is the most common gradient type on the web — used in hero sections, buttons, cards, section dividers and overlays. CSS syntax: linear-gradient(angle, color1 position, color2 position, ...).
Common Angles
- 0deg / to top: Bottom to top — dark at bottom, light at top.
- 90deg / to right: Left to right — good for horizontal accents.
- 180deg / to bottom: Top to bottom — most common for hero sections.
- 135deg: Top-left to bottom-right — the classic diagonal gradient.
- 45deg: Bottom-left to top-right — alternate diagonal.
Best Practices
Linear gradients feel most professional when the two colors are close in hue (analogous) or share a lightness value. High-contrast or complementary linear gradients can feel garish — use them sparingly for high-energy accents. For text on gradient backgrounds, ensure contrast passes WCAG AA.