The Complete Guide to Modern CSS Gradients
Learn the mechanics of linear, radial, and conic gradients, explore color harmony principles, and discover how to write performant, accessible gradients in standard CSS and Tailwind.
1. The Three Modern CSS Gradient Types
Linear Gradients
Interpolates colors along a straight ray defined by an angle (e.g. 135deg or to right). Perfect for UI cards, hero section backgrounds, and CTA buttons.
Radial Gradients
Radiates colors outward from an origin point (circle or ellipse). Excellent for creating subtle glow effects, spotlights, and depth under modal dialogues.
Conic Gradients
Rotates colors around a center origin in a 360-degree sweep. Ideal for pie charts, loading spinners, metallic sheen reflections, and color wheels.
2. Color Stop Mechanics & Interpolation
A gradient is defined by an array of color stops. Each stop designates a specific color and its percentage position along the line. When positions are spaced evenly, the browser performs linear interpolation across the color spectrum. By adding intermediate stops or adjusting distances, designers can craft ultra-smooth transitions without muddy grey bands.
3. High-Impact Gradient Text (`background-clip: text`)
Gradient headlines and brand wordmarks add instant visual polish. To apply a gradient to text in pure CSS:
.gradient-text {
background: linear-gradient(135deg, #6366f1, #ec4899);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}4. Accessibility & Contrast Guidelines
When placing text over a multi-colored gradient background, ensure the text maintains a minimum 4.5:1 contrast ratio against the darkest and lightest points of the gradient to comply with WCAG 2.1 AA accessibility standards.