इस्तेमाल करने का तरीका
- Linear, radial या conic चुनें, फिर कोण या केंद्र की स्थिति सेट करें।
- हर स्टॉप का रंग, opacity और स्थिति सेट करें। अधिकतम छह स्टॉप जोड़ें या जिनकी ज़रूरत न हो उन्हें हटाएँ।
- पूर्वावलोकन देखें, फिर CSS लाइन कॉपी करके अपनी stylesheet में डालें।
यह कैसे काम करता है
आउटपुट एक मानक CSS background डिक्लेरेशन होता है। Linear gradient एक कोण के साथ चलता है: 0deg नीचे से ऊपर, 90deg बाएँ से दाएँ और 180deg ऊपर से नीचे जाता है। Radial gradient किसी केंद्र बिंदु से वृत्त या बॉक्स के आकार में फिट होने वाले दीर्घवृत्त के रूप में फैलता है। Conic gradient केंद्र बिंदु के चारों ओर चुने हुए कोण से घूमता है; यह पाई जैसे प्रभावों और रंग-पहियों के लिए उपयोगी है।
रंग स्टॉप उनकी स्थिति के क्रम में लिखे जाते हैं, इसलिए आप उन्हें खींचकर कहीं भी ले जा सकते हैं। कम opacity वाला स्टॉप rgba() के रूप में लिखा जाता है, जिससे पीछे का background दिखाई देता है। एक ही स्थिति पर दो स्टॉप रखने से रंगों के मिश्रण के बजाय स्पष्ट किनारा बनता है—इसी तरह धारियाँ बनाई जाती हैं।
तीनों gradient फ़ंक्शन हर मौजूदा ब्राउज़र में काम करते हैं। डिफ़ॉल्ट रूप से gradients sRGB रंग-स्थान में मिलते हैं, जिससे पूरक रंगों (उदाहरण के लिए नीले और पीले) के बीच का रंग थोड़ा धूसर दिख सकता है; बीच में अधिक चमकीले रंग का स्टॉप जोड़ने से यह समस्या दूर होती है।
उदाहरण
हेडर के लिए हल्का background
linear-gradient(180deg, #f5f7fa 0%, #c3cfe2 100%) ऊपर से नीचे की ओर हल्का रंग-परिवर्तन देता है, जिससे गहरे रंग का टेक्स्ट पढ़ने योग्य रहता है।
स्पष्ट किनारों वाली धारियाँ
चार स्टॉप इस्तेमाल करें: #0b5d1e 0%, #0b5d1e 50%, #f2c14e 50%, #f2c14e 100%। 50% पर मौजूद दोनों स्टॉप बिना मिश्रण के मिलते हैं, जिससे दो ठोस रंगों वाले हिस्से बनते हैं।
स्पॉटलाइट प्रभाव
किसी रंग के ऊपर rgba(255, 255, 255, 0.6) से rgba(255, 255, 255, 0) तक का radial gradient (circle at top left) लगाने से कोने में हल्की रोशनी का प्रभाव मिलता है।
अक्सर पूछे जाने वाले सवाल
0deg किस दिशा में जाता है?
CSS में 0deg ऊपर की ओर होता है, इसलिए gradient नीचे से शुरू होकर ऊपर तक जाता है। 90deg बाएँ से दाएँ जाता है। यह कुछ डिज़ाइन ऐप्स से अलग है, जहाँ 0° का मतलब अक्सर बाएँ से दाएँ होता है।
क्या मैं टेक्स्ट पर gradient इस्तेमाल कर सकता हूँ?
हाँ: पहले background लागू करें, फिर background-clip: text और color: transparent जोड़ें। जाँच लें कि gradient के हर हिस्से पर टेक्स्ट पेज के background के सामने पढ़ने योग्य रहे।
क्या -webkit-linear-gradient जैसे vendor prefix ज़रूरी हैं?
नहीं। मौजूदा ब्राउज़र बिना prefix वाले syntax को सपोर्ट करते हैं। Prefix केवल कई साल पुराने ब्राउज़रों के लिए ज़रूरी हैं।
गोपनीयता
सब कुछ आपके ब्राउज़र में जनरेट होता है। आपके रंग और सेटिंग न तो भेजे जाते हैं, न सेव।