CSS gradients are powerful and flexible, but the syntax is easy to forget if you don't use them every day. Here's a complete reference with real examples.
Three Types of CSS Gradients
Linear Gradient
``css
background: linear-gradient(direction, color1, color2, ...);
`
Direction options:
- Keywords: to right
, to bottom, to bottom right - Angles: 45deg
, 135deg, 270deg
`css
/ Basic /
background: linear-gradient(to right, #2f855a, #68d391);
/ Diagonal /
background: linear-gradient(135deg, #667eea, #764ba2);
/ Three stops /
background: linear-gradient(to right, #f6d365, #fda085, #f093fb);
`
Angle reference: 0deg = bottom to top, 90deg = left to right, 180deg = top to bottom.
Radial Gradient
<code>css
<p>background: radial-gradient(shape size at position, color1, color2);</p>
</code>
`css
/ Circle from center /
background: radial-gradient(circle, #667eea, #764ba2);
/ Circle from corner /
background: radial-gradient(circle at 10% 10%, #a8edea, #fed6e3);
`
Conic Gradient
Good for pie charts and colour wheels:
<code>css
<p>/<em> Pie chart: 30% / 50% / 20% </em>/</p>
<p>background: conic-gradient(red 0% 30%, blue 30% 80%, green 80% 100%);</p>
</code>
Hard Stops (No Fade)
Position two stops at the same point to create a sharp colour change:
<code>css
<p>/<em> Striped flag </em>/</p>
<p>background: linear-gradient(to right,</p>
<p>red 0% 33%,</p>
<p>white 33% 66%,</p>
<p>blue 66% 100%</p>
<p>);</p>
</code>
Repeating Gradients
<code>css
<p>/<em> Diagonal stripes </em>/</p>
<p>background: repeating-linear-gradient(</p>
<p>45deg,</p>
<p>transparent,</p>
<p>transparent 10px,</p>
<p>#2f855a 10px,</p>
<p>#2f855a 20px</p>
<p>);</p>
</code>
Common Use Cases
| Pattern | CSS |
|---|---|
| Hero overlay | linear-gradient(135deg, #667eea, #764ba2) |
| Card darkening | linear-gradient(to bottom, transparent, rgba(0,0,0,0.6)) |
| Progress bar fill | linear-gradient(to right, #2f855a, #68d391) |
| Radial spotlight | radial-gradient(circle, rgba(255,255,255,0.3), transparent) |
| Stripe divider | repeating-linear-gradient(45deg, ...)` |
Browser Support
All three types are supported in all modern browsers (Chrome, Firefox, Safari, Edge) with no vendor prefixes needed.
Generate Without Writing It
The SnappyTools Gradient Generator lets you pick colours, adjust direction, and copy the final CSS directly — with a live preview on a real element. Useful when you want to experiment visually before writing code.
Which gradient type do you use most in production? Linear for backgrounds, or do you actually use conic gradients?
