ग्रेडिएंट से CSS क्या है?

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

लाइव बार पर कलर स्टॉप खींचकर linear, radial और conic gradient बनाइए — प्रीव्यू तुरंत अपडेट होता रहता है। मौजूदा CSS gradient पेस्ट करके वहीं संपादन कीजिए, Sunset, Aurora, Rainbow जैसे प्रीसेट चुनिए, कोण ठीक करिए और सिंटैक्स कॉपी करिए। आउटपुट सादा CSS है — कोई वेंडर प्रिफ़िक्स नहीं, कोई JavaScript नहीं।

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

1. ग्रेडिएंट प्रकार (लीनियर, रेडियल, या कोनिक) चुनें और दिशा या कोण सेट करें।
2. ग्रेडिएंट बार पर क्लिक करके या कलर पिकर का उपयोग करके कलर स्टॉप जोड़ें, हटाएँ या समायोजित करें।
3. अपनी स्टाइलशीट में सीधे उपयोग करने के लिए जनरेट किया गया CSS कोड कॉपी करें।

कब उपयोग करें

• हीरो सेक्शन का बैकग्राउंड डिज़ाइन करते समय जब स्टॉप पोज़िशन और कोण पर पक्की पकड़ चाहिए।
• स्टाइलशीट में पहले से मौजूद gradient को पेस्ट कर के विज़ुअली बदलना और वापस कॉपी करना।
• पाई-चार्ट जैसे सेगमेंट बैकग्राउंड या रेनबो लोडर बनाने के लिए conic-gradient उत्पन्न करना।

परिणाम

सनसेट ग्रेडिएंट आज़माएं: linear-gradient(135deg, #ff6b35 0%, #f72585 50%, #7209b7 100%) — हीरो सेक्शन बैकग्राउंड के लिए अच्छा रहेगा।

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

linear, radial और conic gradient में फ़र्क़ क्या है?

linear रंगों को सीधी रेखा के कोण पर बढ़ाता है। radial किसी केंद्र बिंदु से चक्र-दर-चक्र फैलता है। conic केंद्र के चारों ओर पाई-चार्ट की तरह घूमता है। तीनों एक ही color-stop सिंटैक्स स्वीकार करते हैं।

मेरे CSS से gradient कैसे इम्पोर्ट करूँ?

पूरा घोषणा वाक्य Import फ़ील्ड में पेस्ट करिए — जैसे background: linear-gradient(135deg, #ff6b35, #f72585); — और Import दबाइए। संपादक उसमें से कोण, स्टॉप और प्रकार पहचान कर अपने आप भर देगा।

कुछ स्क्रीन पर gradient में पट्टियाँ (banding) क्यों दिखती हैं?

जब दो स्टॉप रंग में काफ़ी अलग हों और स्क्रीन 8-बिट हो, तब banding दिखता है। बीच में एक स्टॉप जोड़िए या कोण की रेंज घटाइए। HDR रेंडर वाले ब्राउज़र में banding बहुत कम होता है।

क्या इसे background-image के रूप में इस्तेमाल कर सकते हैं?

हाँ। कॉपी की गई स्ट्रिंग background, background-image, और किसी भी CSS प्रॉपर्टी में चलती है जो इमेज स्वीकार करती है — border-image, mask, और आधुनिक ब्राउज़र में SVG fill तक।

क्या आउटपुट में -webkit- जैसे प्रिफ़िक्स आते हैं?

नहीं। linear, radial और conic 2017 से सभी एवरग्रीन ब्राउज़र में बिना प्रिफ़िक्स के चलते हैं। आज प्रिफ़िक्स जोड़ना सिर्फ़ स्टाइलशीट बढ़ाने जैसा है।

संबंधित उपकरण