CSS ग्रेडिएंट कैसे बनाएँ
CSS ग्रेडिएंट बिना किसी छवि फ़ाइल के सहज रंग संक्रमण बनाने की अनुमति देते हैं। वे छवियों से हल्के हैं, किसी भी स्क्रीन आकार के अनुकूल पूरी तरह से स्केल करते हैं और कस्टमाइज़ करने में सरल हैं।
CSS ग्रेडिएंट के प्रकार
लीनियर ग्रेडिएंट — रंग सीधी रेखा में गुज़रते हैं (ऊपर से नीचे, बाएँ से दाएँ या कोई भी कोण)।
background: linear-gradient(135deg, #667eea, #764ba2);रेडियल ग्रेडिएंट — रंग एक केंद्रीय बिंदु से एक वृत्ताकार या अंडाकार पैटर्न में विकिरण करते हैं।
background: radial-gradient(circle, #667eea, #764ba2);कोनिक ग्रेडिएंट — रंग एक केंद्रीय बिंदु के चारों ओर घूमते हैं, एक रंग पहिये की तरह।
background: conic-gradient(from 0deg, #667eea, #764ba2, #667eea);ग्रेडिएंट दृश्य रूप से कैसे बनाएँ
- ग्रेडिएंट प्रकार चुनें — लीनियर या रेडियल चुनें और कोण या स्थिति समायोजित करें।
- रंग स्टॉप जोड़ें — ग्रेडिएंट की विभिन्न स्थितियों पर रंग जोड़ने के लिए क्लिक करें। प्रत्येक रंग और इसकी स्थिति समायोजित करें।
- CSS कॉपी करें — उत्पन्न कोड कॉपी करें और इसे अपनी स्टाइलशीट में पेस्ट करें।
एक दृश्य जनरेटर का उपयोग सिंटैक्स को हाथ से लिखने की तुलना में तेज़ है, विशेष रूप से कई रंग स्टॉप के साथ।
सामान्य ग्रेडिएंट पैटर्न
हीरो सेक्शन पृष्ठभूमि — एक सूक्ष्म दो-रंग का ग्रेडिएंट टेक्स्ट से विचलित हुए बिना गहराई जोड़ता है।
background: linear-gradient(135deg, #0f172a, #1e3a5f);बटन हाइलाइट — एक हल्का ग्रेडिएंट बटनों को एक त्रि-आयामी प्रभाव देता है।
background: linear-gradient(180deg, #3b82f6, #2563eb);छवि पर ओवरले — एक ग्रेडिएंट ओवरले फ़ोटो पर टेक्स्ट की पठनीयता में सुधार करता है।
background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));एक्सेंट बॉर्डर — दृश्य रुचि बनाने के लिए बॉर्डर के रूप में एक ग्रेडिएंट का उपयोग करें।
border-image: linear-gradient(90deg, #667eea, #764ba2) 1;सुझाव
- सूक्ष्म रहें — सर्वश्रेष्ठ ग्रेडिएंट शायद ही नज़र आते हैं। दो समान रंगों के बीच एक हल्का बदलाव गहराई जोड़ता है। नाटकीय इंद्रधनुषी ग्रेडिएंट शायद ही कभी पेशेवर दिखते हैं।
- छवियों के बजाय ग्रेडिएंट का उपयोग करें — एक CSS ग्रेडिएंट बिना नेटवर्क अनुरोध के तुरंत लोड होता है। जब भी संभव हो सजावटी पृष्ठभूमि छवियों को ग्रेडिएंट से बदलें।
- डार्क मोड में परीक्षण करें — वे ग्रेडिएंट जो हल्की पृष्ठभूमि पर अच्छे दिखते हैं, डार्क मोड में धुल सकते हैं या टकरा सकते हैं। यदि आवश्यक हो तो प्रत्येक थीम के लिए अलग-अलग ग्रेडिएंट परिभाषित करें।
- टेक्स्ट कंट्रास्ट पर ध्यान दें — यदि आप ग्रेडिएंट पर टेक्स्ट रखते हैं, तो जाँचें कि यह पूरे ग्रेडिएंट रेंज में पठनीय रहता है, केवल सबसे हल्के या सबसे गहरे हिस्से में नहीं।
अक्सर पूछे जाने वाले प्रश्न
क्या CSS ग्रेडिएंट सभी ब्राउज़रों में काम करते हैं?
हाँ। Chrome, Firefox, Safari और Edge सहित सभी आधुनिक ब्राउज़रों में लीनियर और रेडियल ग्रेडिएंट समर्थित हैं। कोनिक ग्रेडिएंट का समर्थन थोड़ा नया है लेकिन सभी वर्तमान संस्करणों में काम करता है।
क्या मैं दो से अधिक रंगों का उपयोग कर सकता हूँ?
हाँ। CSS ग्रेडिएंट उतने रंग स्टॉप स्वीकार करते हैं जितने आप चाहते हैं। प्रत्येक स्टॉप ग्रेडिएंट के साथ एक रंग और एक स्थिति को परिभाषित करता है।
क्या ग्रेडिएंट प्रदर्शन को प्रभावित करते हैं?
नहीं। CSS ग्रेडिएंट ब्राउज़र द्वारा रेंडर किए जाते हैं और छवि फ़ाइलों से बहुत हल्के हैं। वे बिना किसी अतिरिक्त डाउनलोड के किसी भी स्क्रीन आकार के अनुकूल पूरी तरह से स्केल करते हैं।
क्या एक ग्रेडिएंट को एनिमेट किया जा सकता है?
सीधे background प्रॉपर्टी पर CSS ट्रांज़िशन के साथ नहीं, लेकिन आप background-position को एनिमेट कर सकते हैं या सहज ग्रेडिएंट एनिमेशन बनाने के लिए @property के साथ CSS कस्टम प्रॉपर्टी का उपयोग कर सकते हैं।