CSS Gradients
Bina image ke smooth color transitions. Gradients image return karte hain.
Linear
linear-gradient(direction, color1, color2).
Radial
radial-gradient(circle, color1, color2).
Conic
conic-gradient(from 0deg, ...). Pie charts!
Repeating
repeating-linear-gradient(...) — stripes.
gradients.css
.hero {
background: linear-gradient(135deg, #f97316, #ef4444);
}
.glow {
background: radial-gradient(circle, #fcd34d, transparent);
}
.pie {
background: conic-gradient(
#f97316 0% 25%, #10b981 25% 50%,
#3b82f6 50% 75%, #8b5cf6 75% 100%
);
border-radius: 50%;
}💡 Pro Tips
- Gradients IMAGES return karte hain
- Conic + border-radius = pie chart
- Multiple gradients layer karo