Build beautiful linear, radial and conic gradients visually — copy CSS in one click.
linear-gradient(angle, stop1, stop2, ...)
transitions colors along a straight line defined by the angle.
0deg
= bottom to top,
90deg
= left to right,
135deg
= diagonal. The
repeating-linear-gradient()
variant tiles the pattern.
radial-gradient(shape size at cx cy, stops)
radiates outward from a center point. Shape can be
circle
or
ellipse
. Size keywords like
farthest-corner
control how far the gradient extends. Great for spotlight and glow effects.
conic-gradient(from angle at cx cy, stops)
sweeps colors around a center point like a pie chart. Excellent for pie charts, color wheels, and starburst patterns. Color stop positions are angles (degrees) rather than lengths.
When you blend between two saturated, complementary colors in sRGB color space — say red and blue — the midpoint passes through grey. That’s not a bug; it’s mathematically correct for sRGB interpolation. The midpoint of rgb(255,0,0) and rgb(0,0,255) is rgb(128,0,128), which is purple, not grey — but for many color pairs the midpoint really is desaturated. There are three fixes:
| Fix | How | Browser support | Best when |
|---|---|---|---|
| Add a midpoint color stop | Add a vibrant third color at 50%: linear-gradient(90deg, red, orange 50%, blue) | Universal | You have a specific midpoint color in mind. Works everywhere today. |
| oklch interpolation | linear-gradient(in oklch, red, blue) | Chrome 111+, Safari 16.2+, Firefox 113+ | You want the browser to find the perceptually correct midpoint automatically. Produces richer, more vibrant blends. |
| hsl interpolation | linear-gradient(in hsl, red, blue) | Same as oklch | Similar benefit to oklch. oklch is generally considered better for gradients because it has more perceptually uniform lightness. |
If you need oklch gradients in older browsers, provide an sRGB fallback first and then the oklch version. Browsers that don’t understand in oklch will silently use the fallback.
to right is a logical direction — it flows in the inline-end direction, so it reverses in a right-to-left document. 90deg is a physical angle — it always goes left-to-right regardless of text direction. For design decorations, either is fine. For gradients that visually communicate direction or flow on an internationalised site, use the keyword.
A lot of tutorials show hard color stops with a tiny offset to smooth the edge: red 49.9%, blue 50.1%. This is unnecessary and sometimes creates a faint shadow instead of a clean split. Two stops at exactly the same position produce a genuinely hard edge: red 50%, blue 50%. If the edge looks slightly fuzzy, that’s sub-pixel rendering on your monitor, not a CSS problem.
The gradient-on-text technique requires background-clip: text. Unprefixed background-clip: text is now supported everywhere, but Safari also requires -webkit-background-clip: text and -webkit-text-fill-color: transparent (not just color: transparent). In 2025 you still need both lines. Drop either one and the text reverts to solid color in Safari.
The background shorthand accepts multiple comma-separated layers, but they stack in the opposite order from how you might expect. The first gradient in the list is painted on top; the last is at the back. This matters when you’re layering a radial spotlight over a linear base — put the radial first. It matches the z-order of regular background layers.
You can’t use a gradient as border-color directly. The cleanest approach without extra markup: set border: 2px solid transparent, then use background: linear-gradient(white, white) padding-box, linear-gradient(90deg, red, blue) border-box. The padding-box layer fills the interior with solid color; the border-box layer shows through only at the border area. Works in all modern browsers.
A repeating-linear-gradient tiling at 4px to produce a stripe pattern is fine. A large radial gradient covering the full viewport, animated, on a page with many layers — that forces the GPU to re-composite constantly. If you notice jank during scroll or during CSS animations on a gradient-heavy page, promote the gradient layer with will-change: transform or move it to its own composited layer.
| Function | Minimal working example | Where it’s used |
|---|---|---|
| linear-gradient | linear-gradient(135deg, #6366f1, #06b6d4) | Backgrounds, hero sections, button fills, text clips |
| radial-gradient | radial-gradient(circle at 60% 40%, #f0abfc 0%, transparent 70%) | Spotlight effects, glows, soft vignettes |
| conic-gradient | conic-gradient(from 0deg, #ef4444 0%, #3b82f6 50%, #ef4444 100%) | Pie charts, color wheels, starburst patterns, progress rings |
| repeating-linear-gradient | repeating-linear-gradient(45deg, #000 0 4px, transparent 4px 8px) | Stripe and hatch patterns, loading bars, caution tape UI |
| repeating-radial-gradient | repeating-radial-gradient(circle, #e2e8f0 0 2px, transparent 2px 12px) | Dot grid backgrounds, radar/sonar-style UI |
background-position on an oversized gradient: set the gradient twice as wide as the element, then shift the position. Another approach is animating opacity between two gradient pseudo-elements. For runtime color-stop animation in JavaScript, the Web Animations API and CSS Houdini’s custom paint worklet are the proper tools, though Houdini support is still inconsistent.radial-gradient(circle, color, transparent) is pure CSS painting — very cheap, scales to any size, no DOM overhead. A blurred element with filter: blur() or backdrop-filter involves a separate composited layer and is GPU-intensive, especially if it needs to animate or if there are many of them on a page. Use the gradient for purely decorative backgrounds; reserve blur filters for actual material-design glass effects where the content behind genuinely needs to show through.rgba(0, 0, 0, 0) or transparent, but be aware that transparent in CSS is defined as rgba(0,0,0,0) — fully transparent black. If you fade from, say, blue to transparent, the midpoint blends through a desaturated, dark mush as the color approaches black-transparent. The fix: fade to the same color at zero alpha, e.g. linear-gradient(to right, #6366f1, rgba(99, 102, 241, 0)). This keeps the hue consistent through the fade and produces a clean, smooth transparency.