CSS ग्रेडिएंट
ठोस रंग और फ़ोटो कई बैकग्राउंड ढकते हैं। कभी रंगों के बीच नरम मिश्रण चाहिए — शांत बैनर, चमकदार कार्ड, भारी इमेज फ़ाइल के बिना आसमान। वह मिश्रण ग्रेडिएंट है, जिसे CSS खास तरह के background-image की तरह खींचता है।
CSS ग्रेडिएंट क्या है?
ग्रेडिएंट वह इमेज है जो ब्राउज़र बनाता है — डाउनलोड JPG नहीं। आप इसे linear-gradient() और radial-gradient() जैसे फ़ंक्शन से वर्णन करते हैं, फिर background-image (या background शॉर्टहैंड) में लगाते हैं। नतीजा सामग्री के पीछे फ़ोटो बैकग्राउंड जैसा बैठता है।
प्रकार एक नज़र में
इन दो से शुरू करें। कोनिक बाद में।
📊 रोज़मर्रा के CSS ग्रेडिएंट प्रकार
| प्रकार | फ़ंक्शन | रोज़मर्रा उपयोग |
|---|---|---|
| रैखिक | linear-gradient(…) |
बैनर, बटन, सेक्शन वॉश बाएँ→दाएँ या ऊपर→नीचे |
| रेडियल | radial-gradient(…) |
नरम स्पॉटलाइट कार्ड, केंद्र से गोलाकार फीकापन |
| दिशा शब्द | to right, to bottom |
कोण के बिना पठनीय रैखिक दिशा |
| कोण | 45deg, 90deg |
जब शब्द कम पड़ें तो सटीक झुकाव |
| कलर स्टॉप | teal 0%, navy 100% |
मिश्रण पर हर रंग कहाँ बैठे |
रैखिक: दो रंग, बाएँ से दाएँ
सबसे सरल रैखिक ग्रेडिएंट को एक दिशा और कम से कम दो रंग चाहिए। CSS बीच में मिलाता है।
सरल बाएँ→दाएँ रैखिक ग्रेडिएंट
css.banner {
background-image: linear-gradient(to right, #0f766e, #0f172a);
color: #f8fafc;
padding: 2rem;
}फ़ंक्शन कैसे पढ़ें
to right दिशा है। #0f766e शुरू; #0f172a अंत। ब्राउज़र बीच भरता है।
कोण और अधिक स्टॉप
विकर्ण वॉश के लिए कोण, और समृद्ध मिश्रण के लिए बीच के स्टॉप जोड़ें।
तीन स्टॉप वाला कोणीय रैखिक
css.hero {
background-image: linear-gradient(
135deg,
#0f766e 0%,
#134e4a 45%,
#0f172a 100%
);
color: white;
min-height: 10rem;
padding: 2rem;
}स्टॉप आदत
कलर स्टॉप मतलब «यह रंग यहाँ।» प्रतिशत पढ़ने में आसान। स्थिति छोड़ सकते हैं — ब्राउज़र समान दूरी देगा।
रेडियल: केंद्र से फीका
radial-gradient() केंद्र से बाहर फैलता है — नरम कार्ड और फ़ोकस ग्लो के लिए उपयोगी।
नरम रेडियल कार्ड
css.card {
background-image: radial-gradient(circle at center, #ccfbf1, #0f766e);
color: #042f2e;
padding: 1.5rem;
}वृत्त टिप
circle at center आकार गोल और बीच में रखता है। बाद में at top या at 20% 30% कहीं और स्पॉटलाइट के लिए।
ग्रेडिएंट background-image पर जीते हैं
ग्रेडिएंट फ़ंक्शन color में न डालें — वह टेक्स्ट रंगता है। ग्रेडिएंट बैकग्राउंड इमेज हैं; टेक्स्ट कंट्रास्ट अभी भी मायने रखता है।
फ़ॉलबैक रंग वाला शॉर्टहैंड
css.panel {
background: #0f172a linear-gradient(to bottom, #115e59, #0f172a);
color: #ecfdf5;
padding: 1.5rem;
}खुद आज़माएँ
.bannerपरlinear-gradient(to right, #0f766e, #0f172a)और हल्का टेक्स्ट।- दिशा
to bottomकरें — मिश्रण अक्ष पलटता है। .heroपर135degऔर तीन स्टॉप (teal → मध्य → navy)।.cardपरradial-gradient(circle at center, #ccfbf1, #0f766e)।- वैकल्पिक:
backgroundशॉर्टहैंड में ग्रेडिएंट से पहले ठोस फ़ॉलबैक रंग।
आम गलतियाँ
color: linear-gradient(…)लिखना — ग्रेडिएंट टेक्स्ट रंग नहीं- केवल एक कलर स्टॉप — मिलाने के लिए कम से कम दो रंग
- भूलना कि यह
background-imageहै (कंट्रास्ट और स्टैक लागू) - हर सेक्शन पर शोरभरा इंद्रधनुष — नरम दो-तीन स्टॉप वॉश ज़्यादा प्रोफ़ेशनल
- सोचना ग्रेडिएंट सार्थक फ़ोटो बदल देगा (उत्पाद शॉट अभी भी असली इमेज)
सार
- ग्रेडिएंट ब्राउज़र-निर्मित बैकग्राउंड इमेज हैं
linear-gradient()रेखा पर मिलाता है;radial-gradient()केंद्र से- दिशा शब्द, कोण और कलर स्टॉप रूप नियंत्रित करते हैं
background-imageयाbackgroundशॉर्टहैंड से जोड़ें- ऊपर टेक्स्ट का कंट्रास्ट मज़बूत रखें
- भारी तरकीबों से पहले एक रैखिक बैनर और एक रेडियल कार्ड अभ्यास करें
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी