CSS ग्रेडिएंट जनरेटर

यह कैसे काम करता है

हर कलर स्टॉप एक ऑब्जेक्ट है जिसमें एक रंग और 0 से 100 के बीच एक पोज़िशन होती है. हर बदलाव पर, आउटपुट बनने से पहले स्टॉप्स को पोज़िशन के हिसाब से सॉर्ट किया जाता है, इसलिए आप उन्हें किसी भी क्रम में जोड़ें, नतीजा हमेशा सही बनता है. फिर इन्हें आपके चुने टाइप के हिसाब से linear-gradient(<angle>deg, ...) या radial-gradient(circle, ...) में जोड़ा जाता है. यही स्ट्रिंग प्रीव्यू पर बैकग्राउंड की तरह लगाई जाती है और आउटपुट में प्रिंट होती है, यानी प्रीव्यू वही CSS दिखा रहा है जो आप कॉपी करते हैं, कोई अनुमान नहीं.

अगर दो गहरे रंगों के बीच का ग्रेडिएंट बीच में फीका दिखे, तो यह टूल की गलती नहीं है: ब्राउज़र डिफ़ॉल्ट रूप से sRGB कलर स्पेस में ग्रेडिएंट कैलकुलेट करते हैं, और कुछ रंग जोड़ों (जैसे नीला से पीला) के बीच का सीधा रास्ता एक धुंधले, कम-सैचुरेटेड ग्रे से होकर गुजरता है. हल यह है कि बीच में एक असली, तेज़ रंग का स्टॉप जोड़ दें, जो यह टूल आसान बना देता है.

पूरा ग्रेडिएंट इस पेज के जावास्क्रिप्ट में ही बनता और लगता है. रंग चुनना या एंगल स्लाइडर घुमाना कोई नेटवर्क रिक्वेस्ट नहीं भेजता, यह आप डेवलपर टूल्स के नेटवर्क टैब में खुद जांच सकते हैं.