CSS ग्रेडिएंट कैसे बनाएं

linear-gradient। सबसे सामान्य प्रकार। एक सीधी रेखा के साथ रंग का बदलाव। आप दिशा (ऊपर से नीचे, बाएं से दाएं, कस्टम एंगल) को नियंत्रित कर सकते हैं और जितने चाहें उतने कलर स्टॉप जोड़ सकते हैं।

radial-gradient। रंग एक केंद्र बिंदु से बाहर की ओर फैलते हैं, गोलाकार या अंडाकार रूप में। लाइट इफेक्ट्स, चमकते बटन या सूक्ष्म बैकग्राउंड बनाने के लिए बेहतरीन।

conic-gradient। रंग एक केंद्र बिंदु के चारों ओर घूमते हैं, जैसे कलर व्हील के सेक्टर। पाई चार्ट, गेज या रेनबो इफेक्ट के लिए आदर्श।

repeating-linear-gradient / repeating-radial-gradient। दोहराने वाले वर्शन, स्ट्राइप पैटर्न या टेक्सचर बनाने के लिए बेहतरीन।

एनालॉगस कलर। कलर व्हील पर पास के रंग चुनें (नीला → बैंगनी, नारंगी → लाल)। ट्रांज़िशन स्वाभाविक रूप से सामंजस्यपूर्ण और स्मूद होते हैं।

कॉम्प्लिमेंटरी कलर। व्हील पर विपरीत रंग (नीला → नारंगी)। सावधानी: सीधा ट्रांज़िशन बीच में ग्रे ज़ोन बना सकता है। इससे बचने के लिए मध्यवर्ती रंग जोड़ें।

मोनोक्रोम। एक ही ह्यू की विविधताएं (हल्का नीला → गहरा नीला)। हमेशा एलिगेंट और प्रोफेशनल। सूक्ष्म बैकग्राउंड के लिए बेहतरीन।

अचानक ट्रांज़िशन से बचें। व्हील पर रंग जितने दूर हों, ट्रांज़िशन को स्मूद करने के लिए उतने अधिक मध्यवर्ती स्टॉप चाहिए।

प्रो टिप: oklch() कलर स्पेस का उपयोग करें जो परसेप्चुअली यूनिफॉर्म ट्रांज़िशन देता है। oklch में ग्रेडिएंट RGB से अधिक नेचुरल होते हैं।

स्टेप 1: टाइप चुनें। लीनियर, रेडियल या कोनिक। हर टाइप के अपने कस्टमाइज़ेशन ऑप्शन हैं।

स्टेप 2: अपने रंग चुनें। कलर पिकर से अपने स्टॉप चुनें। एक क्लिक में स्टॉप जोड़ें, हटाएं या री-ऑर्डर करें।

स्टेप 3: दिशा और पोज़िशन एडजस्ट करें। एंगल, स्टार्टिंग पॉइंट और हर स्टॉप की सटीक पोज़िशन बदलें पूरे कंट्रोल के लिए।

स्टेप 4: CSS कोड कॉपी करें। CSS कोड रियल-टाइम में जनरेट होता है। कॉपी करें और सीधे अपनी स्टाइलशीट में पेस्ट करें।

लाइव प्रीव्यू, ग्रेडिएंट हिस्ट्री और पॉपुलर पैलेट सजेशन शामिल।

सेक्शन बैकग्राउंड। दो करीबी टोन के बीच सूक्ष्म ग्रेडिएंट कंटेंट से ध्यान भटकाए बिना गहराई जोड़ता है। मॉडर्न वेब डिज़ाइन में सबसे सामान्य उपयोग।

बटन और CTA। ग्रेडिएंट बटन को फ्लैट कलर से ज़्यादा डायनामिक और आकर्षक बनाता है। होवर पर हल्का ग्रेडिएंट चेंज जोड़ें संतोषजनक इफेक्ट के लिए।

ग्रेडिएंट टेक्स्ट। background-clip: text से आप टेक्स्ट पर सीधे ग्रेडिएंट लगा सकते हैं। हेडिंग और लोगो के लिए बहुत ट्रेंडी।

इमेज ओवरले। इमेज पर सेमी-ट्रांसपेरेंट ग्रेडिएंट ऊपर के टेक्स्ट की रीडेबिलिटी सुधारता है।

बॉर्डर। ग्रेडिएंट के साथ border-image क्लासिक border-color से असंभव कलरफुल बॉर्डर बनाता है।

CSS ग्रेडिएंट परफ़ॉर्मेंट हैं। इमेज के विपरीत, ये वेक्टर (कोई पिक्सेलेशन नहीं), लाइटवेट (कुछ बाइट कोड vs KB इमेज) और GPU-रेंडर्ड हैं।

इमेज से ज़्यादा CSS को प्राथमिकता दें। CSS ग्रेडिएंट हमेशा ग्रेडिएंट इमेज से तेज़ लोड होता है और शार्प होता है। यह सभी स्क्रीन साइज़ में नेचुरली एडैप्ट भी होता है।

स्टॉप की संख्या सीमित करें। 4-5 से ज़्यादा स्टॉप कोड को कॉम्प्लेक्स और प्रीव्यू को मुश्किल बनाते हैं। बहुत कॉम्प्लेक्स ग्रेडिएंट के लिए SVG पर विचार करें।

मोबाइल पर टेस्ट करें। ग्रेडिएंट OLED vs LCD स्क्रीन पर अलग दिख सकते हैं। हमेशा कई स्क्रीन टाइप पर टेस्ट करें।

एक्सेसिबिलिटी। सुनिश्चित करें कि ग्रेडिएंट बैकग्राउंड पर टेक्स्ट सभी बिंदुओं पर पढ़ने योग्य रहे। हर सिरे पर WCAG कंट्रास्ट चेक करें।