Understanding CSS Gradients: Linear, Radial & Multi-Stop
From subtle micro-gradients on button states to rich full-bleed landing page backgrounds, master the modern syntax of CSS background gradients.
1. The Anatomy of a Linear Gradient
A linear gradient moves smoothly along a straight vector defined either by an explicit degree (e.g. 90deg) or directional keywords (to right, to bottom right).
background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
In this example, 135deg points from the top-left diagonally toward the bottom-right corner. The first color starts at 0% position and blends steadily into the purple stop at 100%.
2. Working with Radial Gradients
Radial gradients radiate outward from a central origin, creating circular or elliptical light diffusion:
background: radial-gradient(circle at center, #38bdf8 0%, #0f172a 80%);
Radial gradients are particularly effective for ambient lighting effects, glowing badges, and subtle hero section backdrop glows.
3. Multi-Stop Transitions & Color Positioning
You can chain three or more color stops to create complex sunset, neon, or metallic finishes:
background: linear-gradient(90deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%);
By controlling the percentage position of each stop, you determine where the transition tightens or broadens across the container surface.
Visual Gradient Designer
Adjust angles, drag color stops, test presets, and copy clean CSS without typing code manually:
Open Gradient Studio →