**How to Use the CSS Gradient Generator**
Creating beautiful CSS gradients used to mean memorizing complex syntax or endlessly tweaking hex codes by hand. This free gradient generator eliminates that friction — pick your colors, adjust your settings, and get production-ready CSS in seconds.
**Step-by-Step**
1. **Choose your gradient type** — Select Linear, Radial, or Conic from the type selector.
2. **Set your colors** — Click each color stop to open the color picker. Add more stops with the + button, or drag stops to reorder.
3. **Adjust the angle or position** — For linear gradients, set the angle (0-360 degrees). For radial, pick the center position. For conic, set the starting angle.
4. **Preview in real time** — The gradient preview updates instantly as you make changes.
5. **Copy the CSS** — Click Copy CSS to get the complete background property ready to paste into your stylesheet.
**The Three Types of CSS Gradients**
**Linear Gradients**
Linear gradients transition colors along a straight line. The angle controls direction:
- 0deg = bottom to top
- 90deg = left to right
- 180deg = top to bottom
- 270deg = right to left
- 45deg = diagonal bottom-left to top-right
Examples:
background: linear-gradient(90deg, #3b82f6, #8b5cf6); /* blue to purple */
background: linear-gradient(180deg, #f97316, #ef4444, #7c3aed); /* sunset */
background: linear-gradient(135deg, #f8fafc, #e2e8f0); /* subtle card bg */
**Radial Gradients**
Radial gradients radiate outward from a center point, creating circular or elliptical transitions:
background: radial-gradient(circle at center, #fbbf24, #d97706, #92400e);
background: radial-gradient(ellipse at top left, #60a5fa, #1e3a8a);
**Conic Gradients**
Conic gradients sweep colors around a center point, like a color wheel or pie chart. Available in all modern browsers since 2021:
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
/* Pie chart — 40% blue, 35% green, 25% orange */
background: conic-gradient(#3b82f6 0% 40%, #22c55e 40% 75%, #f97316 75% 100%);
**10 Ready-to-Use Gradient Presets**
1. Netflix hero dark:
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
2. Ocean blue:
background: linear-gradient(135deg, #667eea, #764ba2);
3. Glassmorphism overlay:
background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05));
4. Warm sunset:
background: linear-gradient(to right, #f6d365, #fda085);
5. Cool mint:
background: linear-gradient(120deg, #a1ffce, #faffd1);
6. Deep space:
background: linear-gradient(to bottom, #0f0c29, #302b63, #24243e);
7. Peach cream:
background: linear-gradient(to right, #ffecd2, #fcb69f);
8. Material button:
background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%);
9. Stripe diagonal:
background: linear-gradient(135deg, #6772e5 0%, #6772e5 50%, #9b9fe7 50%);
10. Text gradient (requires -webkit-background-clip: text and -webkit-text-fill-color: transparent):
background: linear-gradient(90deg, #f97316, #8b5cf6);
**Real-World Design Examples**
**Netflix Dark Hero Overlay**
Netflix uses a linear gradient fading from transparent to near-black over hero images. This lets the background image show at the top while keeping title text readable at the bottom. The gradient goes from rgba(20,20,20,0) to rgba(20,20,20,1) over the bottom 60%.
**Glassmorphism Cards**
The glassmorphism trend uses a semi-transparent white gradient (rgba(255,255,255,0.1) to rgba(255,255,255,0.05)) combined with backdrop-filter: blur(10px) and a white border.
**Skeleton Loading Animations**
Skeleton shimmer effects use an animated gradient moving left to right:
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
**CSS Gradient vs. SVG vs. Background Image**
| Feature | CSS Gradient | SVG Gradient | Background Image |
|---|---|---|---|
| File size | Zero bytes | Small SVG | Large (PNG/JPG) |
| Scalability | Infinite | Infinite | Fixed resolution |
| Animation | Yes (CSS) | Yes (SMIL) | No |
| Performance | Excellent | Good | Good |
For solid or simple gradients: always use CSS. SVG gradients are useful when you need the gradient defined inside an SVG shape. Background images make sense for photographic backgrounds.
**Gradient Angle Reference**
| Angle | Direction | Keyword |
|---|---|---|
| 0deg | Bottom to Top | to top |
| 90deg | Left to Right | to right |
| 180deg | Top to Bottom | to bottom |
| 270deg | Right to Left | to left |
**Browser Support (2024)**
All modern browsers support all three gradient types with no vendor prefixes. Linear and radial: Chrome 26+, Firefox 16+, Safari 7+, Edge 12+. Conic: Chrome 69+, Firefox 83+, Safari 12.1+. IE has below 0.5% market share — no prefix needed.
**5 Common CSS Gradient Mistakes**
**Mistake 1: Assuming 0deg means left to right**
In CSS, 0deg points upward (bottom to top), not to the right. Use 90deg for left to right, or the keyword to right.
**Mistake 2: Using hex colors for transparency**
Hex colors cannot be semi-transparent. Use rgba(255, 0, 0, 0.5) for 50% red, or the modern rgb(255 0 0 / 50%) syntax. Eight-digit hex like #ff000080 is only supported in CSS Level 4.
**Mistake 3: Wrong syntax for repeating gradients**
Repeating gradients require precise stop positions:
background: repeating-linear-gradient(45deg, #000 0, #000 10px, #fff 10px, #fff 20px);
**Mistake 4: Too many color stops hurting performance**
Gradients with 10+ color stops on large elements cause repaint performance issues on mobile. Simplify to 2-4 stops whenever possible.
**Mistake 5: No fallback for legacy elements**
For critical branded elements, add a solid color fallback before the gradient:
background: #3b82f6;
background: linear-gradient(...);
The second declaration overrides on supporting browsers.
**Pro Tips**
**CSS Variables for Theme Gradients**
Define gradient colors as CSS custom properties:
:root { --grad-start: #3b82f6; --grad-end: #8b5cf6; }
.hero { background: linear-gradient(135deg, var(--grad-start), var(--grad-end)); }
[data-theme=dark] { --grad-start: #1d4ed8; --grad-end: #6d28d9; }
**Text Gradients**
Apply a gradient to text using background-clip: text. The -webkit- prefix is still required:
background: linear-gradient(90deg, #f97316, #8b5cf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
**Hard Color Stops for Split Backgrounds**
Add two identical stop positions to create a hard edge:
background: linear-gradient(45deg, #3b82f6 50%, #8b5cf6 50%);