CSS gradients let you create smooth colour transitions entirely in the browser — no images, no SVGs, no external dependencies. The syntax trips people up at first, but once you understand the model, you can build backgrounds, borders, buttons, and decorative effects that would have required a designer and a Photoshop export a decade ago.
This guide covers all three gradient types with working examples you can drop straight into your CSS.
linear-gradient — Straight-line transitions
The most common gradient. Colours transition along a straight line from one edge to another.
``css
/ Basic: top to bottom /
background: linear-gradient(to bottom, #2f855a, #276749);
/ Angled: diagonal /
background: linear-gradient(135deg, #667eea, #764ba2);
/ Three stops /
background: linear-gradient(to right, #f6d365, #fda085, #f093fb);
`
Direction syntax
There are two ways to specify direction:
`css
/ Keyword — clear intent /
linear-gradient(to right, ...) / left → right /
linear-gradient(to bottom right, ...) / top-left → bottom-right /
/ Angle — precise control /
linear-gradient(0deg, ...) / bottom → top /
linear-gradient(90deg, ...) / left → right /
linear-gradient(45deg, ...) / diagonal /
`
The default (no direction specified) is to bottom — top to bottom.
Colour stops and positions
`css
/ Default: colours spaced evenly /
linear-gradient(to right, red, blue);
/ Explicit positions /
linear-gradient(to right, red 0%, blue 100%);
/ Abrupt change (hard stop) — the same position twice /
linear-gradient(to right, red 50%, blue 50%);
/ Uneven spacing /
linear-gradient(to right, red 20%, yellow 40%, green 80%);
`
Repeating linear gradients
<code>css
<p>/<em> Candy stripe </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>
radial-gradient — Circular and elliptical transitions
Colours radiate outward from a centre point.
`css
/ Circle from centre /
background: radial-gradient(circle, #667eea, #764ba2);
/ Ellipse (default shape) /
background: radial-gradient(ellipse, #f6d365, #fda085);
/ Positioned /
background: radial-gradient(circle at top left, #2f855a, transparent);
`
Size keywords
`css
/ closest-side — gradient fits to nearest edge /
background: radial-gradient(circle closest-side at 20% 50%, #667eea, transparent);
/ farthest-corner (default) — gradient reaches farthest corner /
background: radial-gradient(circle farthest-corner at 20% 50%, #667eea, transparent);
`
Practical use: spotlight effect
<code>css
<p>.hero {</p>
<p>background:</p>
<p>radial-gradient(ellipse 80% 60% at 50% 0%, rgba(102,126,234,0.4), transparent),</p>
<p>#1a202c;</p>
<p>}</p>
</code>
conic-gradient — Pie chart and colour wheel transitions
Colours rotate around a centre point like a colour wheel or pie chart. Browser support is solid (Chrome 69+, Firefox 83+, Safari 12.1+).
`css
/ Basic pie /
background: conic-gradient(#f6d365 0% 33%, #fda085 33% 66%, #f093fb 66% 100%);
/ Colour wheel /
background: conic-gradient(
hsl(0, 100%, 50%),
hsl(60, 100%, 50%),
hsl(120, 100%, 50%),
hsl(180, 100%, 50%),
hsl(240, 100%, 50%),
hsl(300, 100%, 50%),
hsl(360, 100%, 50%)
);
/ Rotated start position /
background: conic-gradient(from 90deg, #667eea, #764ba2);
/ Positioned centre /
background: conic-gradient(from 0deg at 30% 50%, #f6d365, #fda085);
`
Layering Multiple Gradients
background accepts a comma-separated list. Gradients are layered front-to-back:
<code>css
<p>background:</p>
<p>linear-gradient(to right, rgba(255,255,255,0) 50%, rgba(255,255,255,0.1) 100%),</p>
<p>linear-gradient(135deg, #667eea 0%, #764ba2 100%);</p>
</code>
This is how you create glossy buttons, depth effects, and layered backgrounds without images.
Common Patterns
Frosted card background
<code>css
<p>.card {</p>
<p>background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0));</p>
<p>backdrop-filter: blur(10px);</p>
<p>border: 1px solid rgba(255,255,255,0.18);</p>
<p>}</p>
</code>
Gradient border (using background-clip)
<code>css
<p>.btn {</p>
<p>border: 2px solid transparent;</p>
<p>background:</p>
<p>linear-gradient(white, white) padding-box,</p>
<p>linear-gradient(135deg, #667eea, #764ba2) border-box;</p>
<p>}</p>
</code>
Subtle section divider
<code>css
<p>.section-divider {</p>
<p>height: 1px;</p>
<p>background: linear-gradient(to right, transparent, #e2e8f0 20%, #e2e8f0 80%, transparent);</p>
<p>}</p>
</code>
Building Gradients Without Trial and Error
Writing gradient CSS by hand is possible but slow — getting the angle, stop positions, and colour values right takes iteration. A visual gradient builder is much faster. SnappyTools has a free CSS gradient generator that lets you drag stops, pick colours, and copy the ready-to-paste CSS — no signup needed.
Quick Reference
| Type | Syntax | Use case |
|------|--------|----------|
| linear-gradient | linear-gradient(direction, color stops) | Backgrounds, buttons, dividers |
| radial-gradient | radial-gradient(shape size at position, color stops) | Glows, spotlights, vignettes |
| conic-gradient | conic-gradient(from angle at position, color stops) | Pie charts, colour wheels, spinners |
| repeating-* | Same as above, tiled | Stripes, patterns, textures |
Gradients are one of those CSS features where a small amount of knowledge unlocks a disproportionately large amount of design capability. Start with linear-gradient, learn the stop syntax, then reach for radial and conic` when you need circular or rotational effects.
Originally published at https://snappytools.app/gradient-generator/
