ग्रेडिएंट जनरेटर
लाइव प्रीव्यू के साथ CSS ग्रेडिएंट बनाएँ।
ग्रेडिएंट जनरेटर के बारे में
GuruAlpha ग्रेडिएंट जनरेटर लाइव प्रीव्यू के साथ लीनियर, रेडियल और कॉनिक CSS ग्रेडिएंट बनाता है। रंग चुनें, कोण और दिशाएँ एडजस्ट करें, कई कलर स्टॉप की परतें बनाएँ, और उपयोग के लिए तैयार CSS कोड कॉपी करें। बैकग्राउंड, बटन, हीरो सेक्शन और किसी भी डिज़ाइन तत्व के लिए बढ़िया जो सहज रंग संक्रमण से लाभान्वित होता है।
ग्रेडिएंट आधुनिक वेब डिज़ाइन में सबसे लोकप्रिय डिज़ाइन रुझानों में से एक हैं। वे फ्लैट डिज़ाइन में छवियों की आवश्यकता के बिना गहराई, दृश्य रुचि और परिष्कार जोड़ते हैं। ग्रेडिएंट जनरेटर कस्टम ग्रेडिएंट बनाना आसान बनाता है — अपने रंग चुनें, कोण एडजस्ट करें, और परिणाम रीयल-टाइम में देखें। बनाया गया CSS कोड सीधे आपकी स्टाइलशीट में कॉपी किया जा सकता है।
टूल तीन ग्रेडिएंट प्रकारों का समर्थन करता है। लीनियर ग्रेडिएंट रंगों को एक सीधी रेखा के साथ संक्रमित करते हैं — सबसे आम प्रकार, जो बैकग्राउंड, बटन और ओवरले के लिए उपयोग होता है। रेडियल ग्रेडिएंट एक केंद्रीय बिंदु से निकलते हैं — स्पॉटलाइट प्रभावों और वृत्ताकार डिज़ाइन के लिए बढ़िया। कॉनिक ग्रेडिएंट एक केंद्र बिंदु के चारों ओर घूमते हैं — कलर व्हील और पाई चार्ट प्रभावों के लिए उपयोगी।
मल्टी-स्टॉप एडिटर आपको ग्रेडिएंट लाइन के साथ कलर स्टॉप जोड़ने, हटाने और पुनः स्थिति देने देता है। प्रत्येक स्टॉप को एक विशिष्ट रंग और स्थिति (0-100%) असाइन की जा सकती है, जो आपको संक्रमण पर सटीक नियंत्रण देती है। जैसे ही आप स्टॉप एडजस्ट करते हैं, रीयल-टाइम प्रीव्यू अपडेट होता है, तत्काल दृश्य फीडबैक प्रदान करता है।
एक्सपोर्ट फ़ॉर्मैट में सादा CSS (linear-gradient), ब्राउज़र संगतता के लिए वेंडर प्रीफ़िक्स के साथ CSS, Sass/SCSS वेरिएबल्स, CSS कस्टम प्रॉपर्टीज़ और Tailwind आर्बिट्ररी वैल्यूज़ शामिल हैं। यह सभी आधुनिक वेब डेवलपमेंट वर्कफ़्लो को कवर करता है।
ग्रेडिएंट जनरेटर की मुख्य विशेषताएँ
- लीनियर, रेडियल और कॉनिक ग्रेडिएंट प्रकार
- पोज़िशनिंग के साथ मल्टी-स्टॉप कलर एडिटर
- रीयल-टाइम लाइव प्रीव्यू
- कोण और दिशा नियंत्रण
- CSS, SCSS, CSS वेरिएबल्स, Tailwind के रूप में एक्सपोर्ट
- प्रेरणा के लिए रैंडम ग्रेडिएंट जनरेटर
- कॉपी के लिए तैयार CSS कोड
- सभी डिवाइस पर काम करता है
ग्रेडिएंट जनरेटर का उपयोग कैसे करें
- GuruAlpha पर ग्रेडिएंट जनरेटर खोलें।
- ग्रेडिएंट प्रकार चुनें: लीनियर, रेडियल या कॉनिक।
- कलर स्टॉप जोड़ने के लिए ग्रेडिएंट बार पर क्लिक करें।
- कलर पिकर का उपयोग करके प्रत्येक स्टॉप के लिए रंग चुनें।
- कोण (लीनियर) या आकार (रेडियल/कॉनिक) एडजस्ट करें।
- डेमो तत्व पर ग्रेडिएंट का रीयल-टाइम में प्रीव्यू देखें।
- बनाया गया CSS कोड कॉपी करें।
ग्रेडिएंट जनरेटर उपयोग करने के सुझाव
- सरल, सुरुचिपूर्ण ग्रेडिएंट के लिए 2-3 कलर स्टॉप से शुरू करें।
- प्रेरणा के लिए रैंडम ग्रेडिएंट जनरेटर का उपयोग करें।
- 135 डिग्री पर लीनियर ग्रेडिएंट एक लोकप्रिय विकर्ण प्रभाव बनाते हैं।
- चमकीले केंद्र वाले रेडियल ग्रेडिएंट स्पॉटलाइट प्रभाव बनाते हैं।
- हमेशा ब्राउज़रों में ग्रेडिएंट का परीक्षण करें — वेंडर प्रीफ़िक्स संगतता सुनिश्चित करते हैं।
ग्रेडिएंट जनरेटर के बारे में अक्सर पूछे जाने वाले सवाल
लीनियर, रेडियल और कॉनिक में क्या अंतर है?
लीनियर एक रेखा (दिशा) के साथ संक्रमित होता है। रेडियल एक केंद्र बिंदु (वृत्त/दीर्घवृत्त) से निकलता है। कॉनिक एक केंद्र के चारों ओर घूमता है (कलर व्हील की तरह)।
मैं अधिक कलर स्टॉप कैसे जोड़ूँ?
नया स्टॉप जोड़ने के लिए ग्रेडिएंट बार पर कहीं भी क्लिक करें। उन्हें पुनः स्थिति देने के लिए स्टॉप खींचें। इसका रंग बदलने के लिए किसी स्टॉप पर क्लिक करें।
क्या CSS कोड ब्राउज़र-संगत है?
एक्सपोर्ट में पुराने ब्राउज़रों के साथ अधिकतम संगतता के लिए वेंडर प्रीफ़िक्स (-webkit-, -moz-) शामिल हैं।
क्या मैं ग्रेडिएंट को टेक्स्ट रंग के रूप में उपयोग कर सकता हूँ?
हाँ। टेक्स्ट पर ग्रेडिएंट बैकग्राउंड लागू करने के लिए background-clip: text और -webkit-text-fill-color: transparent का उपयोग करें।