CSS ग्रेडिएंट जनरेटर — लाइव प्रीव्यू के साथ लीनियर, रेडियल और कॉनिक

यह टूल क्या करता है

CSS ग्रेडिएंट जनरेटर से आप आँखों से देखकर ग्रेडिएंट डिज़ाइन कर सकते हैं और तैयार CSS कॉपी कर सकते हैं। लीनियर, रेडियल या कॉनिक ग्रेडिएंट चुनें, जितने चाहें कलर स्टॉप जोड़ें, उनकी स्थिति खिसकाएँ, कोण या केंद्र सेट करें, और प्रीव्यू तुरंत अपडेट हो जाता है। आप मौजूदा linear-gradient(…), radial-gradient(…) या conic-gradient(…) पेस्ट करके उसे विज़ुअली एडिट भी कर सकते हैं। सब कुछ आपके ब्राउज़र में चलता है।

उपयोग कैसे करें

किसी प्रीसेट से शुरू करें या सैंपल ग्रेडिएंट रखें।
प्रकार चुनें। लीनियर और कॉनिक ग्रेडिएंट में कोण होता है; रेडियल और कॉनिक में केंद्र होता है जिसे केंद्र X और केंद्र Y से खिसकाया जाता है।
कलर स्टॉप एडिट करें: पिकर से रंग बदलें या कोई भी CSS रंग लिखें, स्थिति खींचकर उसे खिसकाएँ, + स्टॉप जोड़ें से सबसे बड़े अंतराल में नया स्टॉप डालें, और उलटें से क्रम पलटें।
धारियों और छल्लों के लिए दोहराएँ चालू करें।
CSS कार्ड से कोड कॉपी करें, चाहें तो बहुत पुराने ब्राउज़र के लिए ठोस रंग फ़ॉलबैक के साथ।

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

उदाहरण

.hero {
  background-color: #667eea;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

अच्छे ग्रेडिएंट के लिए सुझाव

हल्का रखें। दो पास-पास के रंग (नीले से बैंगनी, नारंगी से गुलाबी) विपरीत रंगों से ज़्यादा स्मूद लगते हैं, जो बीच में मटमैले भूरे हो सकते हैं।
बीच में एक स्टॉप जोड़ें ताकि मिश्रण पर नियंत्रण रहे। पड़ोसियों से थोड़ा हल्का तीसरा स्टॉप नरम हाइलाइट देता है।
तीखे स्टॉप आकार बनाते हैं। एक ही स्थिति वाले स्टॉप तीखे किनारे बनाते हैं: धारियाँ, झंडे, प्रोग्रेस बार और पाई चार्ट यही तरकीब इस्तेमाल करते हैं।
दिशाएँ। to right 90deg के बराबर है और to bottom (डिफ़ॉल्ट) 180deg के बराबर। कोण ऊपर से घड़ी की दिशा में गिने जाते हैं।
ग्रेडिएंट पर टेक्स्ट पूरे ग्रेडिएंट पर पढ़ने लायक रहना चाहिए। कंट्रास्ट चेकर से सबसे हल्के और सबसे गहरे स्टॉप को टेक्स्ट रंग के सामने जाँचें।

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

› लीनियर, रेडियल और कॉनिक ग्रेडिएंट में क्या अंतर है?

लीनियर ग्रेडिएंट किसी कोण पर सीधी रेखा के साथ रंग मिलाता है। रेडियल ग्रेडिएंट केंद्र बिंदु से वृत्त या दीर्घवृत्त के रूप में फैलता है। कॉनिक ग्रेडिएंट घड़ी की सुइयों की तरह केंद्र के चारों ओर घूमता है, जो कलर व्हील और पाई चार्ट के लिए अच्छा है।

› स्मूद ब्लेंड की जगह तीखी धारियाँ कैसे बनाएँ?

दो पड़ोसी स्टॉप को एक ही स्थिति दें, जैसे red 50% और blue 50%। तब रंग उसी बिंदु पर तुरंत बदल जाता है। पैटर्न को दोहराने के लिए दोहराएँ चालू करें, CSS में धारियाँ ऐसे ही बनती हैं।

› क्या मैं पारदर्शी रंग इस्तेमाल कर सकता हूँ?

हाँ। किसी स्टॉप में कोई भी CSS रंग लिखें, जैसे rgba(), अल्फ़ा वाला hsl(), 8 अंकों वाला hex या transparent। कलर पिकर आपका अल्फ़ा बनाए रखता है, और प्रीव्यू पारदर्शी हिस्सों के पीछे चेकरबोर्ड दिखाता है।

› क्या अब भी वेंडर प्रीफ़िक्स या फ़ॉलबैक की ज़रूरत है?

प्रीफ़िक्स की ज़रूरत नहीं है: सभी मौजूदा ब्राउज़र बिना प्रीफ़िक्स के लीनियर, रेडियल और कॉनिक ग्रेडिएंट सपोर्ट करते हैं। वैकल्पिक ठोस रंग फ़ॉलबैक सिर्फ़ बहुत पुराने ब्राउज़र या background-color पढ़ने वाले टूल, जैसे कुछ ईमेल क्लाइंट, के लिए मायने रखता है।