CSS gradients let you create smooth colour transitions without a single image file. They're resolution-independent, fast to render, and configurable entirely in CSS. Here's a complete reference covering all three gradient types, common patterns, and techniques you'll actually use.
The Three Gradient Types
1. Linear Gradient
Colours flow in a straight line from one point to another.
``css
/ Basic two-colour fade /
background: linear-gradient(135deg, #6c63ff, #f43f8a);
/ Three-stop gradient /
background: linear-gradient(to right, #1a202c, #2f855a, #68d391);
/ With explicit stop positions /
background: linear-gradient(180deg, #2f855a 0%, #68d391 50%, #f0fff4 100%);
`
The first argument is the direction: an angle (135deg) or a keyword (to right, to bottom right). If omitted, the default is to bottom (top-to-bottom fade).
Common angle reference:
- 0deg
= bottom to top - 90deg
= left to right - 180deg
= top to bottom - 270deg
= right to left - 45deg
/ 135deg = diagonal
2. Radial Gradient
Colours radiate outward from a central point in a circle or ellipse.
`css
/ Simple radial /
background: radial-gradient(circle, #6c63ff, #1a202c);
/ Positioned ellipse /
background: radial-gradient(ellipse at 30% 40%, #68d391, #2f855a, #1a202c);
/ Hard edge at a specific radius /
background: radial-gradient(circle 200px at center, #f0fff4, #2f855a);
`
The shape (circle or ellipse) and center position (at 50% 50% by default) are optional. For spotlight or glow effects, radial gradients are usually the right choice.
3. Conic Gradient
Colours sweep around a central point, like a colour wheel or pie chart.
`css
/ Colour wheel /
background: conic-gradient(red, orange, yellow, green, blue, indigo, violet, red);
/ Pie chart (hardcoded segments) /
background: conic-gradient(
#2f855a 0% 35%,
#68d391 35% 60%,
#9ae6b4 60% 85%,
#f0fff4 85% 100%
);
/ Spinner /
background: conic-gradient(from 0deg, transparent 340deg, #2f855a 360deg);
`
Conic gradients are uniquely suited to pie/donut charts built in pure CSS — each segment maps to a percentage range.
Practical Techniques
Gradient Overlay on Images
To darken an image for text legibility:
<code>css
<p>.hero {</p>
<p>background:</p>
<p>linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.2)),</p>
<p>url('hero.jpg') center/cover no-repeat;</p>
<p>}</p>
</code>
The gradient layer sits on top of the image. Adjust the opacity values to control how dark the overlay is.
Gradient on 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>
This clips the gradient to the shape of the text characters. Works in all modern browsers.
Gradient Border
CSS doesn't support border-color: gradient(...), but you can achieve it:
<code>css
<p>.gradient-border {</p>
<p>border: 3px solid transparent;</p>
<p>background:</p>
<p>linear-gradient(white, white) padding-box,</p>
<p>linear-gradient(135deg, #6c63ff, #f43f8a) border-box;</p>
<p>}</p>
</code>
The padding-box clip fills the element interior with white; the border-box clip applies the gradient to the full box including border — the border area shows the gradient because the padding-box white doesn't extend there.
Repeating Gradients
`css
/ Diagonal stripes /
background: repeating-linear-gradient(
45deg,
#2f855a 0px,
#2f855a 10px,
transparent 10px,
transparent 20px
);
/ Concentric circles /
background: repeating-radial-gradient(
circle,
#2f855a 0px,
#2f855a 5px,
transparent 5px,
transparent 15px
);
`
Repeating variants tile the pattern indefinitely. Define one complete cycle, then let it repeat.
Animated Gradient Background
You can't animate background-position on a gradient directly, but background-size + position on an oversized gradient creates a shifting effect:
`css
.animated-gradient {
background: linear-gradient(270deg, #6c63ff, #f43f8a, #43b5f4, #2f855a);
background-size: 400% 400%;
animation: shift 8s ease infinite;
}
@keyframes shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
`
This technique is used on many hero sections and animated cards.
Multi-Stop Gradients Without Mud
When blending two perceptually distant colours (e.g. red to blue), a direct linear transition looks muddy in the middle — because CSS interpolates through the sRGB colour space and passes through a greyish midpoint.
Fix: add intermediate hue stops.
`css
/ Muddy /
background: linear-gradient(to right, red, blue);
/ Clean /
background: linear-gradient(to right, red, orange, yellow, green, blue);
`
Or use color-mix() in CSS to blend in a better colour space (modern browsers only):
<code>css
<p>background: linear-gradient(</p>
<p>to right in oklch,</p>
<p>oklch(65% 0.25 25),</p>
<p>oklch(65% 0.25 265)</p>
<p>);</p>
</code>
The in oklch directive interpolates through the OKLCh perceptual colour space, which produces much smoother hue transitions.
Browser Compatibility
All three gradient types are supported in every modern browser (Chrome, Firefox, Safari, Edge). The in oklch colour space interpolation requires Chrome 111+ / Firefox 113+. The background-clip: text technique requires the -webkit-` prefix to be safe.
Building Gradients Visually
Manually iterating on hex values and angles is slow. A CSS gradient generator gives you live preview feedback as you adjust angle, colour stops, and gradient type — copy the generated CSS with one click. The SnappyTools generator supports all three gradient types plus Tailwind output.
Gradients are one of the most versatile CSS tools available. Once you know the three types and a few of the composition techniques above, you can replace most background images with pure CSS — smaller payloads, infinite scalability, and full control in the stylesheet.
Originally published at https://snappytools.app/gradient-generator/
