Create linear-gradient() with direction control using keywords and angles
Build radial-gradient() with shape, size, and position control
Design conic-gradient() for pie charts, color wheels, and patterns
Master color stops for precise gradient control and hard edges
Use repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient() for patterns
Apply modern color spaces (in oklch, in lch) for vibrant gradients
Layer multiple gradients for complex visual effects
Create text gradients with background-clip: text
Build gradient borders using advanced techniques
Introduction to CSS Gradients
CSS gradients create smooth color transitions without images. They're rendered by the GPU, scale perfectly at any size, and offer precise control over colors and positioning.
CSS provides three gradient types: linear (straight line transitions), radial (circular/elliptical spreading from a center), and conic (sweeping around a center point). Each type supports standard, repeating, and layered variations.
Linear Gradients - Direction & Control
Linear gradients transition colors along a straight line. Control direction using keywords (to right, to bottom) or angles (45deg, 135deg).
/* Direction keywords */
background: linear-gradient(to right, #667eea, #764ba2);
background: linear-gradient(to bottom, #fa709a, #fee140);
background: linear-gradient(to top right, #30cfd0, #330867);
/* Angle-based (0deg = up, 90deg = right) */
background: linear-gradient(45deg, #f093fb, #f5576c);
background: linear-gradient(135deg, #4facfe, #00f2fe);
/* Multi-color with explicit stops */
background: linear-gradient(to right,
#fa709a 0%,
#fee140 50%,
#30cfd0 100%
);
/* Hard stops for stripes */
background: linear-gradient(to right,
red 0%, red 20%,
orange 20%, orange 40%,
yellow 40%, yellow 60%,
green 60%, green 80%,
blue 80%, blue 100%
);
Radial Gradients - Circular & Elliptical
Radial gradients radiate outward from a center point. Control shape (circle or ellipse), size, and position.
/* Basic radial (defaults to ellipse at center) */
background: radial-gradient(#667eea, #764ba2);
/* Explicit shape */
background: radial-gradient(circle, #667eea, #764ba2);
background: radial-gradient(ellipse, #e0c3fc, #8ec5fc);
/* Size keywords */
background: radial-gradient(closest-side, #f093fb, #f5576c);
background: radial-gradient(farthest-corner, #30cfd0, #330867);
/* Position control */
background: radial-gradient(circle at top left, #667eea, #764ba2);
background: radial-gradient(circle at 70% 30%, #fa709a, #fee140);
background: radial-gradient(ellipse at top, #e0c3fc, #8ec5fc);
/* Complex positioning with color stops */
background: radial-gradient(circle at center,
#fff 0%,
#fff 30%,
transparent 30%,
transparent 100%
);
Conic Gradients - Sweeping Around a Point
Conic gradients sweep colors around a center point like a color wheel. Perfect for pie charts, progress indicators, and geometric patterns.
CSS now supports multiple color spaces for gradient interpolation. Different color spaces produce dramatically different results, especially in the middle of gradients.
/* Default: sRGB (often dull/muddy middle) */
background: linear-gradient(to right, red, green, blue);
/* OKLCH: perceptually uniform, vibrant */
background: linear-gradient(in oklch to right, red, green, blue);
/* LCH: perceptually uniform */
background: linear-gradient(in lch to right, red, green, blue);
/* HSL: hue-based interpolation */
background: linear-gradient(in hsl to right, red, green, blue);
/* OKLCH longer hue: goes the long way around */
background: linear-gradient(
in oklch longer hue to right,
red, green, blue
);
Multiple Gradients - Layered Effects
Stack multiple gradients by separating them with commas. The first gradient appears on top; later gradients show through transparent areas.
/* Two overlapping linear gradients */
background:
linear-gradient(135deg, rgba(255,0,0,0.5), transparent),
linear-gradient(225deg, rgba(0,0,255,0.5), transparent);
/* Complex mesh gradient */
background:
linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
/* Radial spotlight over linear */
background:
radial-gradient(circle at 30% 30%,
rgba(255,255,255,0.3), transparent 50%),
linear-gradient(135deg, #667eea, #764ba2);
/* Pattern over gradient */
background:
repeating-linear-gradient(
45deg, transparent, transparent 10px,
rgba(255,255,255,.05) 10px, rgba(255,255,255,.05) 20px
),
linear-gradient(135deg, #fa709a, #fee140);
Text Gradients - Colorful Typography
Apply gradients to text using background-clip: text. The gradient fills the text shape, creating vibrant typography effects.