Skip to main content
Back to Blog
Design • Jan 31, 2026 • 5 min read

CSS Gradients: Linear vs Radial vs Conic Explained

Three gradient functions in CSS, three completely different effects. Plus the syntax tricks that actually look professional.

linear-gradient(direction, color1, color2): straight color transition. Use 135deg for "designer diagonal", or "to right" for left-to-right. radial-gradient(shape size at position, color1, color2): emanates from a point. Spotlight effect: radial-gradient(circle at 50% 50%, white, transparent). conic-gradient(from angle at position, color1 deg, color2 deg): sweeps around a point. Creates color wheels, pie charts, and the "Apple gradient" look. Add color stops at specific percentages for hard-edged transitions. Our CSS Gradient Generator builds all three with live preview and copy-paste output.