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

आठ तक कलर स्टॉप से लीनियर, रेडियल या कॉनिक ग्रेडिएंट बनाएं, sRGB फॉलबैक के साथ CSS कॉपी करें और PNG या SVG में एक्सपोर्ट करें।

कैसे CSS कॉपी करें

1
रंग और स्टॉप की जगह चुनें
दो स्टॉप से शुरू करें और आठ तक जोड़ें। हर स्टॉप में रंग का मान और प्रतिशत में जगह टाइप की जाती है। इसलिए माउस से हैंडल खिसकाने की जगह आप सटीक संख्या डाल सकते हैं।
2
लीनियर, रेडियल या कॉनिक चुनें
लीनियर या कॉनिक ग्रेडिएंट के लिए कोण सेट करें, रेडियल के लिए आकार और केंद्र। यह भी चुनें कि पूरा ग्रेडिएंट दोहराया जाए या नहीं। प्रीव्यू उसी समय बदल जाता है।
3
CSS कॉपी करें या PNG डाउनलोड करें
CSS दो डिक्लेरेशन में मिलता है: एक sRGB फॉलबैक और उसके ऊपर आधुनिक इंटरपोलेशन वाला रूप। वही ग्रेडिएंट आप 4096 पिक्सल तक किसी भी साइज के PNG में या SVG में भी एक्सपोर्ट कर सकते हैं।

OKLCH में इंटरपोलेशन क्यों

साधारण sRGB में नीले से पीले का ग्रेडिएंट बीच में फीके स्लेटी रंग से गुजरता है। यह आपके ब्राउजर की गड़बड़ी नहीं है। लाल, हरे और नीले चैनल का अलग-अलग औसत निकालने से रंग की चमक (क्रोमा) ठीक वहीं खत्म हो जाती है, जहां आंख साफ हरा रंग देखना चाहती है। OKLCH एक पर्सेप्चुअल स्पेस है, यानी आंख के देखने के हिसाब से बना है। उसमें वही दो छोर ऐसा बीच का रंग देते हैं, जो गहरा बना रहता है, और रोशनी बराबर बढ़ती है। आधुनिक CSS में आप बता सकते हैं कि इंटरपोलेशन किस स्पेस में हो, जैसे `linear-gradient(90deg in oklch, ...)`। यह जनरेटर डिफॉल्ट रूप से यही इस्तेमाल करता है। पुराना रूप चाहिए, तो oklab, sRGB और HSL भी उपलब्ध हैं।

फॉलबैक जितना दिखता है, उससे ज्यादा जरूरी क्यों है

जो ब्राउजर `in oklch` नहीं समझता, वह सिर्फ इस एक शब्द को नजरअंदाज नहीं करता, बल्कि पूरा डिक्लेरेशन फेंक देता है। फॉलबैक के बिना परिणाम थोड़ा अलग ग्रेडिएंट नहीं, बल्कि कोई ग्रेडिएंट ही नहीं होता, और नीचे जो भी बैकग्राउंड रंग है, वही दिखने लगता है। इसलिए कॉपी किए गए CSS में हमेशा दो `background-image` लाइनें होती हैं। पहली फॉलबैक है: आपके चुने हुए स्पेस में यहीं गिने गए सोलह बीच के स्टॉप, जो साधारण sRGB hex में लिखे जाते हैं। यह उसी कर्व के इतने करीब होता है कि ज्यादातर लोग फर्क नहीं पहचान पाते। दूसरी लाइन आधुनिक एक-लाइन वाला रूप है, जिसे हर सक्षम ब्राउजर ऊपर से लागू करता है।

दोहराने वाले ग्रेडिएंट और कॉनिक का खास मामला

दोहराने वाला ग्रेडिएंट स्टॉप के क्रम को बार-बार दोहराता है। यह तभी काम करता है, जब आखिरी स्टॉप 100% से नीचे हो। वरना दोहराने के लिए कुछ बचता ही नहीं, और परिणाम साधारण ग्रेडिएंट जैसा ही दिखता है। यह मामला कुछ भी कॉपी करने से पहले पकड़ लिया जाता है। कॉनिक ग्रेडिएंट की एक्सपोर्ट में अपनी सीमा है: SVG 1.1 में कॉनिक ग्रेडिएंट का कोई एलिमेंट ही नहीं है। इसलिए SVG बटन यह बताता है और आपको PNG की ओर भेजता है। पुराने Safari के साथ काम करने के लिए PNG को आधे-आधे डिग्री के 720 टुकड़ों से बनाया जाता है।

सारी गिनती इसी टैब में होती है

रंगों का इंटरपोलेशन, CSS का टेक्स्ट, SVG मार्कअप और PNG — सब कुछ आपके डिवाइस पर JavaScript और canvas में बनता है। आपके ग्रेडिएंट के बारे में कुछ भी अपलोड नहीं होता, और कोई इमेज रेंडर करने के लिए कहीं नहीं भेजी जाती। टैब बंद करें, तो पीछे कुछ नहीं बचता।

अक्सर पूछे जाने वाले सवाल

ग्रेडिएंट का इंटरपोलेशन OKLCH में क्यों करें?

क्योंकि दूर के रंगों के बीच sRGB इंटरपोलेशन ग्रेडिएंट के बीच के हिस्से को फीका कर देता है और वहां स्लेटी पट्टी बन जाती है। OKLCH आंख के हिसाब से एक जैसा है, इसलिए बीच का रंग अपनी चमक बनाए रखता है और रोशनी बराबर बढ़ती दिखती है।

फॉलबैक लाइन की जरूरत क्यों है?

जो ब्राउजर `in <space>` सिंटैक्स नहीं समझता, वह सिर्फ अनजान हिस्सा नहीं, पूरा डिक्लेरेशन छोड़ देता है। फॉलबैक साधारण sRGB में बना अनुमानित रूप है, जो पहले लिखा जाता है। इसलिए ऐसे ब्राउजर में भी ग्रेडिएंट दिखता है।

दोहराने वाला ग्रेडिएंट कैसे बनाएं?

दोहराने का विकल्प चालू करें और आखिरी स्टॉप को 100% से नीचे ले जाएं, जैसे 20% पर। तब स्टॉप का क्रम पूरे एलिमेंट पर दोहराया जाता है। आखिरी स्टॉप 100% पर हो, तो दोहराने के लिए कुछ नहीं बचता। तब आपको यह साफ बताया जाता है, चुपचाप वैसा ही परिणाम नहीं दिया जाता।

कॉनिक ग्रेडिएंट के लिए SVG क्यों नहीं है?

SVG 1.1 में सिर्फ लीनियर और रेडियल ग्रेडिएंट हैं, कॉनिक के लिए कोई एलिमेंट नहीं है। सैकड़ों टुकड़ों से नकली ग्रेडिएंट बनाने पर ऐसी फाइल बनती, जिसे कोई एडिट नहीं कर पाता। इसलिए कॉनिक के लिए SVG एक्सपोर्ट नहीं होता और उसकी जगह PNG दिया जाता है।

क्या ऐसा ग्रेडिएंट बना सकते हैं, जो पारदर्शी होता जाए?

हां। जिस स्टॉप को धीरे-धीरे गायब करना है, उसके लिए अल्फा वाला रंग लिखें, जैसे आठ अंकों वाला hex या rgba()। CSS और PNG दोनों में पारदर्शिता बनी रहती है।

बैकग्राउंड किस साइज में डाउनलोड करें?

फुल-स्क्रीन बैकग्राउंड के लिए आमतौर पर 1920 पिक्सल चौड़ाई काफी है, और ग्रेडिएंट बहुत अच्छी तरह कंप्रेस होते हैं। 2048 से ज्यादा सिर्फ प्रिंट के लिए काम का है। वेब पर इस्तेमाल करना है, तो CSS चुनें: यह कुछ सौ बाइट का होता है और किसी भी साइज तक फैल जाता है।

क्या Safari इन ग्रेडिएंट को सपोर्ट करता है?

Safari 16.4 और उसके बाद के वर्जन इंटरपोलेशन स्पेस समझते हैं। पुराने वर्जन sRGB लाइन पर लौट जाते हैं, और वह इसीलिए जोड़ी गई है। CSS में कॉनिक ग्रेडिएंट Safari 12.1 से सपोर्ट होते हैं। PNG एक्सपोर्ट उन्हें टुकड़ों से बनाता है, ताकि और पुराने वर्जन में भी वे सही दिखें।