CSS gradients let you create smooth transitions between colours without image files — they're resolution-independent, load instantly, and are supported in every modern browser. If you've been avoiding gradients because the syntax looks intimidating, this guide breaks it down step by step.
The Three Types of CSS Gradient
1. Linear Gradient
The most common type. Colour transitions along a straight line.
``css
/ Basic top-to-bottom /
background: linear-gradient(#6c63ff, #f43f8a);
/ With direction /
background: linear-gradient(to right, #6c63ff, #f43f8a);
/ With angle /
background: linear-gradient(135deg, #6c63ff, #f43f8a);
`
The angle controls direction: 0deg is bottom-to-top, 90deg is left-to-right, 180deg is top-to-bottom. The most popular choice in modern UI design is 135deg — a diagonal that feels dynamic without being aggressive.
2. Radial Gradient
Transitions outward from a centre point, creating circular or elliptical patterns.
`css
/ Default — ellipse from centre /
background: radial-gradient(#6c63ff, #f43f8a);
/ Circle, positioned top-left /
background: radial-gradient(circle at 20% 30%, #6c63ff, transparent);
`
Radial gradients are useful for spotlight effects, glow accents, and the mesh gradient technique (stacking multiple radials at different positions).
3. Conic Gradient
Transitions around a centre point, like a pie chart or colour wheel.
<code>css
<p>background: conic-gradient(red, orange, yellow, green, blue, violet, red);</p>
</code>
Conic gradients are perfect for progress rings, pie charts, and colour wheels.
Adding Multiple Colour Stops
Gradients aren't limited to two colours. Add as many stops as you need:
<code>css
<p>background: linear-gradient(135deg, #6c63ff 0%, #f43f8a 50%, #ff7700 100%);</p>
</code>
Stop positions can be percentages or lengths (px, em). If you omit positions, the browser distributes stops evenly.
Creating a Gradient Overlay on an Image
One of the most practical uses of gradients is overlaying them on photos to keep text legible:
<code>css
<p>.hero {</p>
<p>background:</p>
<p>linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)),</p>
<p>url('photo.jpg') center / cover no-repeat;</p>
<p>}</p>
</code>
The gradient is listed first so it renders on top. Replace the rgba values with a brand colour for a tinted overlay.
Rainbow Gradient
A full-spectrum rainbow uses all seven spectral colours as stops:
<code>css
<p>background: linear-gradient(90deg, #ff0000, #ff7700, #ffff00, #00cc00, #0000ff, #8b00ff);</p>
</code>
For a smoother transition, add more intermediate stops between primary colours.
Animating a Gradient
CSS can't directly interpolate between gradient stops, but you can simulate animation using background-size and background-position:
`css
.animated {
background: linear-gradient(270deg, #6c63ff, #f43f8a, #6c63ff);
background-size: 400% 400%;
animation: gradientShift 4s ease infinite;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
`
This creates a looping colour shift with pure CSS — no JavaScript required.
Applying a Gradient to Text
<code>css
<p>.gradient-text {</p>
<p>background: linear-gradient(135deg, #6c63ff, #f43f8a);</p>
<p>-webkit-background-clip: text;</p>
<p>-webkit-text-fill-color: transparent;</p>
<p>background-clip: text;</p>
<p>}</p>
</code>
The -webkit- prefixes are still needed for Safari compatibility.
Using CSS Custom Properties with Gradients
`css
:root {
--grad-start: #6c63ff;
--grad-end: #f43f8a;
}
.hero {
background: linear-gradient(135deg, var(--grad-start), var(--grad-end));
}
@media (prefers-color-scheme: dark) {
:root {
--grad-start: #3b1fa8;
--grad-end: #a0155a;
}
}
`
Mesh Gradients
<code>css
<p>.mesh {</p>
<p>background:</p>
<p>radial-gradient(at 20% 30%, #6c63ff 0px, transparent 50%),</p>
<p>radial-gradient(at 80% 70%, #f43f8a 0px, transparent 50%),</p>
<p>radial-gradient(at 50% 50%, #68d391 0px, transparent 60%);</p>
<p>background-color: #0f172a;</p>
<p>}</p>
</code>
Quick Reference: Linear Gradient Angles
| Angle | Direction | CSS Keyword |
|-------|-----------|-------------|
| 0deg | Bottom → Top | to top |
| 90deg | Left → Right | to right |
| 135deg | Bottom-left → Top-right | to top right |
| 180deg | Top → Bottom | to bottom |
| 270deg | Right → Left | to left |
Tools
Use the CSS Gradient Generator on SnappyTools — add colour stops, adjust the angle, switch between linear/radial/conic, and copy the ready-to-use CSS in one click. Free, no account needed.
Summary
- Use linear-gradient
for directional fades and hero sections - Use radial-gradient
for spotlights, glows, and mesh effects - Use conic-gradient
for charts and colour wheels - Animate with background-size
+ background-position` — no JavaScript needed - Use CSS custom properties for themeable gradients in design systems
Originally published at https://snappytools.app/gradient-generator/