CSS Gradient Generator — Create Linear & Radial Gradients for Your Website
Updated October 2026 · 4 min read
Quick start: Open the free CSS Gradient Generator — pick colours and direction, then copy the ready-to-paste CSS code.
CSS gradients let you create smooth colour transitions without any image files — faster loading, infinitely scalable, and responsive by default. Modern browsers support them natively with zero dependencies.
Linear Gradient Syntax
background: linear-gradient(direction, colour1, colour2, ...);
Direction: to right | to bottom | 45deg | 135deg | etc.
/* Example: blue to purple, left to right */
background: linear-gradient(to right, #3b82f6, #8b5cf6);
/* Multi-stop gradient with positions */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Radial Gradient Syntax
background: radial-gradient(shape size at position, colour1, colour2);
/* Example: circle radiating from centre */
background: radial-gradient(circle at center, #3b82f6, #1e1b4b);
Popular Gradient Combinations
| Name | CSS |
|---|---|
| Ocean blue | linear-gradient(135deg, #667eea, #764ba2) |
| Sunset | linear-gradient(to right, #f97316, #ec4899) |
| Dark slate | linear-gradient(135deg, #1e293b, #334155) |
| Mint fresh | linear-gradient(to right, #10b981, #3b82f6) |
Gradients for Text
Apply a gradient to text using background-clip: text and -webkit-background-clip: text with color: transparent. This creates gradient-coloured text that works in all modern browsers and is a popular effect for hero headings.
Generate CSS Gradients Visually
Pick colours, adjust stops and direction — copy the CSS with one click.
Open Free CSS Gradient Generator →