Guide
When to use each gradient type
Linear gradient
Best for: hero section backgrounds, button backgrounds, dividers, text fills. Flows in a straight line at any angle.
background: linear-gradient(135deg, #ff4d00, #ff8533);
Radial gradient
Best for: spotlight effects, glowing backgrounds, circular fills. Radiates outward from a center point.
background: radial-gradient(circle, #ff4d00, transparent);
Conic gradient
Best for: pie charts, color wheels, unique decorative effects. Rotates around a center point.
background: conic-gradient(#ff4d00, #ff8533, #ff4d00);