Gradients in CSS
From the CSS cheat sheet · Colors & Backgrounds · verified Jul 2026
Gradients
Linear, radial, and conic gradients for backgrounds and text
css
/* Linear gradient */
background: linear-gradient(to right, #3b82f6, #8b5cf6);
background: linear-gradient(135deg, #f59e0b, #ef4444);
/* Radial gradient */
background: radial-gradient(circle, #3b82f6, #1e40af);
/* Conic gradient (pie chart effect) */
background: conic-gradient(red, yellow, lime, aqua, blue, red);💡 Hard color stops at the same position create sharp lines — great for geometric patterns
⚡ Gradient text: background-clip: text + color: transparent reveals the gradient through text
📌 Conic gradients with border-radius: 50% create instant pie charts in pure CSS
🟢 repeating-linear-gradient creates stripes, checkerboards, and geometric patterns
gradientlinearradialconic