CSS gradients have come a long way since the early days of browser-specific prefixes. Today, with linear-gradient, radial-gradient, and conic-gradient all widely supported, you can create smooth colour transitions that previously required image assets — all in pure CSS.
Here's a practical guide to how each gradient type works, when to use them, and some patterns worth knowing.
Linear Gradients
The most common gradient type: a smooth colour transition along a straight line.
``css
/ Top to bottom (default direction) /
background: linear-gradient(#3d7c52, #1a365d);
/ Left to right /
background: linear-gradient(to right, #3d7c52, #1a365d);
/ 45-degree angle /
background: linear-gradient(45deg, #3d7c52, #1a365d);
`
Multiple colour stops
You can add as many stops as you like. Each stop is a colour + optional position.
<code>css
<p>background: linear-gradient(</p>
<p>to right,</p>
<p>#e53e3e 0%,</p>
<p>#d69e2e 25%,</p>
<p>#38a169 50%,</p>
<p>#3182ce 75%,</p>
<p>#805ad5 100%</p>
<p>);</p>
</code>
Hard stops (no blend)
Place two stops at the same position to create a sharp edge instead of a smooth blend — useful for striped patterns:
<code>css
<p>background: linear-gradient(</p>
<p>to right,</p>
<p>#3d7c52 0%,</p>
<p>#3d7c52 50%,</p>
<p>#1a365d 50%,</p>
<p>#1a365d 100%</p>
<p>);</p>
</code>
Radial Gradients
Gradients that radiate from a central point — think spotlight effects or button glow states.
`css
/ Circle from centre /
background: radial-gradient(circle, #fff 0%, #3d7c52 100%);
/ Ellipse (default shape) /
background: radial-gradient(ellipse, #fff 0%, #1a365d 100%);
/ Custom position /
background: radial-gradient(circle at 30% 70%, #fff 0%, #3d7c52 80%);
`
The at keyword positions the focal point. Using at top left creates a corner glow; at 80% 20% gives you more control.
Sizing keywords
`css
/ Gradient reaches the nearest edge /
background: radial-gradient(circle closest-side, #fff, #3d7c52);
/ Gradient reaches the farthest corner (default) /
background: radial-gradient(circle farthest-corner at 10% 10%, #fff, #1a365d);
`
Conic Gradients
Conic gradients sweep around a centre point like a colour wheel or pie chart. Less common, but powerful for specific use cases.
`css
/ Basic colour wheel /
background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
/ Pie chart effect /
background: conic-gradient(#3d7c52 0% 40%, #e53e3e 40% 70%, #3182ce 70% 100%);
/ Custom start angle /
background: conic-gradient(from 90deg, #3d7c52, #1a365d, #3d7c52);
`
The from keyword sets the starting angle. Conic gradients with hard stops are the easiest way to build a CSS-only pie chart without any JavaScript or SVG.
Repeating Gradients
All three gradient types have a repeating- variant that tiles the pattern across the element.
`css
/ Diagonal stripes /
background: repeating-linear-gradient(
45deg,
#3d7c52,
#3d7c52 10px,
#e2e8f0 10px,
#e2e8f0 20px
);
/ Concentric rings /
background: repeating-radial-gradient(
circle,
#3d7c52 0px,
#3d7c52 5px,
transparent 5px,
transparent 20px
);
`
Layering Gradients
CSS backgrounds accept comma-separated layers. Gradients can be layered like stack of transparent panes:
<code>css
<p>background:</p>
<p>linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), /<em> horizontal lines </em>/</p>
<p>linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px), /<em> vertical lines </em>/</p>
<p>linear-gradient(135deg, #1a365d, #2f855a); /<em> base gradient </em>/</p>
<p>background-size: 40px 40px, 40px 40px, 100% 100%;</p>
</code>
This technique creates grid overlays, mesh backgrounds, and glassmorphism effects entirely in CSS.
Gradient Text
Combining background-clip: text with a transparent colour applies a gradient to text:
<code>css
<p>.gradient-text {</p>
<p>background: linear-gradient(90deg, #3d7c52, #3182ce);</p>
<p>-webkit-background-clip: text;</p>
<p>-webkit-text-fill-color: transparent;</p>
<p>background-clip: text;</p>
<p>}</p>
</code>
Browser support is good — both webkit prefixed and unprefixed versions are needed for full coverage.
Building Gradients Visually
Writing gradient CSS by hand is tedious — adjusting stop positions and angles is much easier with a live preview. The Gradient Generator at SnappyTools lets you build linear and radial gradients visually and copies the ready-to-use CSS instantly. Free, browser-based, no account needed.
Performance Note
CSS gradients are rendered by the GPU and are effectively free at render time. However, painting gradients on elements that animate or scroll can cause repaints. Prefer will-change: transform` on animated elements and test with DevTools "Paint flashing" enabled if you're layering many gradients on frequently-redrawn elements.
CSS gradients are one of those features where knowing the full API unlocks patterns you previously had to fake with images or JavaScript. Linear gradients for transitions, radial for spotlight effects, conic for charts and dials — and all three can be combined through layering for surprisingly complex results from a single CSS property.
Originally published at https://snappytools.app/gradient-generator/