Backgrounds & Borders
Gradients
linear-gradient, radial-gradient
💡 Gradient ek smooth color transition hai — jaise sunset ka aasman, ek color se doosre color mein gradually badalta hua, bina koi hard edge ke. CSS gradients ko koi image file download nahi karni padti — pure code se generate hote hain.
linear-gradient(direction, color1, color2, ...) ek straight-line color transition. radial-gradient(color1, color2, ...) center se bahar circular/elliptical transition. Gradients background-image property mein use hote hain (image ki jagah).
.linear {
background: linear-gradient(to right, #ff6b6b, #4ecdc4);
/* left se right, red se teal */
}
.diagonal {
background: linear-gradient(45deg, blue, purple);
/* 45-degree angle */
}
.radial {
background: radial-gradient(circle, yellow, orange);
/* center se bahar, yellow se orange */
}
.multi-stop {
background: linear-gradient(to right, red 0%, yellow 50%, green 100%);
/* multiple color stops, specific percentages par */
}🌈
Gradient ek smooth color transition hai — jaise sunset ka aasman, ek color se doosre color mein gradually badalta hua, bina koi hard edge ke. CSS gradients ko koi image file download nahi karni padti — pure code se generate hote hain.
1 / 2
⚡ Quick Recap
- linear-gradient = straight-line transition, direction specify karo
- radial-gradient = center-outward, circular/elliptical
- Multiple color stops (percentages) = complex, multi-color gradients
Is page mein (2 subtopics)
conic-gradient() colors ko CIRCLE ke around rotate karta hai (radial ki tarah center-out ke bajaye) — pie charts, color wheels, ya loading spinners banane ke liye natural fit.
.pie-chart {
background: conic-gradient(red 0deg 90deg, blue 90deg 180deg, green 180deg 360deg);
border-radius: 50%;
width: 200px;
height: 200px;
}
/* Ek simple pie chart, bina images/SVG ke */Tip: conic-gradient() relatively modern CSS feature hai — pie charts/progress circles ke liye pehle JavaScript/SVG chahiye hota tha, ab pure CSS se possible hai.
background-clip: text + transparent color se gradient text create kar sakte ho — ek popular modern design trend, jaha text ka color khud gradient hota hai.
.gradient-text {
background: linear-gradient(to right, #ff6b6b, #4ecdc4);
-webkit-background-clip: text;
background-clip: text;
color: transparent; /* text ka original color transparent, gradient dikhta hai */
}Common Mistake: -webkit-background-clip: text (vendor prefix) abhi bhi zaroori hai maximum browser compatibility ke liye — is technique ka standard version relatively newer hai, prefix fallback safe practice hai.