Gradient Generator
CSS Gradient Types Explained
linear-gradient
Transitions colors along a straight line, defined as linear-gradient(angle, color1, color2, ...). 0deg points upward, 90deg points right. Introduced in CSS Image Values Level 3 and the most widely used gradient type.
radial-gradient
Radiates colors outward from a center point. Shape can be circle or ellipse, with configurable center position. Ideal for glow effects and button highlights.
conic-gradient
Sweeps colors around a center point like a color wheel. Proposed by Lea Verou and part of CSS Image Values Level 4. Great for pie charts and color rings.
Syntax Reference
/* Linear */ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Radial */ background: radial-gradient(circle at center, #00c6ff, #0072ff); /* Conic */ background: conic-gradient(from 0deg at 50% 50%, red, yellow, lime, aqua, blue, magenta, red);
Browser Support
| Type | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| linear-gradient | 26+ | 16+ | 6.1+ | 12+ |
| radial-gradient | 26+ | 16+ | 6.1+ | 12+ |
| conic-gradient | 69+ | 83+ | 12.1+ | 79+ |
Performance Considerations
CSS gradients are GPU-composited and faster than image equivalents. Avoid complex multi-stop gradients (6+ stops) on many elements simultaneously. When animating gradients, prefer CSS custom properties with @property registration to enable GPU animation rather than rewriting background every frame.
FAQ
How do I layer multiple gradients?
Separate gradient values with commas: background: linear-gradient(...), radial-gradient(...);. Later values render behind earlier ones. Combine with transparent colors for stripes, grids, and patterns.
Can I apply a gradient to text?
Yes. Use background: linear-gradient(...); -webkit-background-clip: text; -webkit-text-fill-color: transparent; to create gradient text.
Can gradients be animated?
Native CSS cannot transition gradient colors directly. Two recommended approaches: 1) Use @property to register custom properties for true gradient transitions; 2) Toggle opacity on pseudo-elements containing different gradients.
Gradients vs images: which performs better?
Gradients need no HTTP request and are vector-rendered, staying sharp at any resolution. For simple backgrounds, gradients outperform equivalent images. Only extremely complex multi-layer gradients might underperform a well-optimized single image.