How CSS Gradients Work — Linear, Radial, Conic Gradients Explained

Core Concepts

linear-gradient — the workhorse

linear-gradient(angle, color1 stop1, color2 stop2, ...) transitions along a straight line. The angle (0deg = bottom→top, 90deg = left→right, 180deg = top→bottom) or keyword (to top, to right, to bottom left) sets the direction. Color stops define positions where each color is at full intensity — between stops, the browser interpolates. Hard stops (same position for two colors) create sharp lines instead of smooth blends.

radial-gradient — circles and ellipses

radial-gradient(shape size at position, color-stop1, color-stop2, ...) emanates from a center point. Shape is circle or ellipse (default: auto based on container). Size keywords: closest-side, farthest-side, closest-corner, farthest-corner. Position sets the center (default: center center). Radial gradients are most commonly used for spotlight effects, circular backgrounds behind icons, and glowing highlights.

conic-gradient — the pie chart gradient

conic-gradient(from startAngle at position, color-stop1, color-stop2, ...) gives a sweep around a center point — think spinning a color wheel. It's the newest of the three gradient types (browser support since Chrome 69, 2018). Perfect for pie charts, progress rings, color picker UI, and watch-face dials. Hard stops create pie wedges; smooth stops create continuous transitions.

Repeating gradients and practical tips

repeating-linear-gradient, repeating-radial-gradient, and repeating-conic-gradient repeat the color stop pattern indefinitely. Use repeating for stripe patterns, progress bar segments, and grid backgrounds. Practical tips: 1) Always provide a solid background-color as a fallback for older browsers. 2) Use deg instead of to right for precise control. 3) Tailwind's bg-gradient-to-* classes generate linear gradients with a simplified syntax — great for rapid prototyping.

Frequently Asked Questions