CSS Gradient Generator Guide
Create linear, radial and conic CSS gradients with live preview. This guide covers gradient syntax, colour stops, angles and common use cases.
Generate CSS gradients with live preview and 15+ presets — copy code instantly.
Open CSS Gradient Generator →CSS Gradient Types
| Type | Syntax | Best For |
|---|---|---|
| Linear | linear-gradient(angle, colors) | Backgrounds, buttons, hero sections |
| Radial | radial-gradient(shape at pos, colors) | Spotlight, glow effects |
| Conic | conic-gradient(from angle, colors) | Pie charts, colour wheels |
CSS Gradient Syntax Examples
Tips for Better Gradients
- Use 2–3 stops max: More than 3 often looks muddy. Test with the preview before adding stops.
- Adjacent hues: Gradients between nearby hues (e.g. blue → purple) look more natural than complementary opposites.
- Low angle for text background: 180° (top-to-bottom) or 0° (bottom-to-top) work well behind text.
- Adjust stop positions: Moving stops away from even spacing creates dynamic, asymmetric gradients.
Frequently Asked Questions
Linear: background: linear-gradient(angle, color1, color2). Radial: radial-gradient(shape at position, colors). Conic: conic-gradient(from angle, colors). Example: linear-gradient(135deg, #a855f7 0%, #3b82f6 100%) = diagonal purple to blue.
Linear: straight-line transition at an angle. Radial: radiates from a centre point. Conic: rotates around a centre. Use linear for backgrounds, radial for glows, conic for pie charts.
Use rgba: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0)) fades from 80% black to transparent. Commonly used for image text overlays.