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

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

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

CSS ग्रेडिएंट जेनरेटर का उपयोग कैसे करें

1. ग्रेडिएंट का प्रकार चुनें: लीनियर, रेडियल या कोनिक।
2. लीनियर या कोनिक ग्रेडिएंट के लिए कोण को डिग्री में सेट करें (0-360); रेडियल एक केंद्रित वृत्त का उपयोग करता है और कोण को अनदेखा करता है।
3. प्रत्येक कलर स्टॉप को संपादित करें: एक HEX रंग टाइप करें या चुनें और उसकी स्थिति प्रतिशत के रूप में सेट करें (0-100)।
4. दूसरा रंग जोड़ने के लिए स्टॉप जोड़ें पर क्लिक करें, या स्टॉप हटाने के लिए ट्रैश आइकन पर (कम से कम दो स्टॉप बनाए रखे जाते हैं)।
5. लाइव पूर्वावलोकन बॉक्स को अपडेट होते देखें, फिर कॉपी बटन से उत्पन्न CSS background नियम कॉपी करें।

उदाहरण

लीनियर, 90deg, #4f86f7 पर 0% और #9333ea पर 100%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%);

रेडियल, स्टॉप #ffffff 0%, #4f86f7 50%, #1e3a8a 100%

background: radial-gradient(circle, #ffffff 0%, #4f86f7 50%, #1e3a8a 100%);

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

कौन-कौन से ग्रेडिएंट प्रकार समर्थित हैं?

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

कलर स्टॉप और स्थितियाँ कैसे काम करती हैं?

प्रत्येक स्टॉप में एक रंग और 0 से 100 तक का स्थिति प्रतिशत होता है। स्टॉप उसी क्रम में CSS में लिखे जाते हैं जिस क्रम में वे सूची में दिखते हैं, ठीक वैसे ही जैसे ब्राउज़र उनकी व्याख्या करता है, इसलिए आप क्रम को सीधे नियंत्रित करते हैं। आप स्टॉप जोड़ें से स्टॉप जोड़ सकते हैं और उन्हें न्यूनतम दो तक हटा सकते हैं।

क्या मैं HEX टाइप करने के बजाय रंग दृश्य रूप से चुन सकता हूँ?

हाँ। अपने ब्राउज़र का मूल कलर पिकर खोलने के लिए प्रत्येक स्टॉप के बगल में छोटे कलर चिप पर क्लिक करें, या रंग फ़ील्ड में सीधे #4f86f7 जैसा HEX मान टाइप करें। जैसे ही आप इसे बदलते हैं, पूर्वावलोकन और CSS अपडेट हो जाते हैं।

रेडियल ग्रेडिएंट के लिए कोण फ़ील्ड क्यों गायब हो जाता है?

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

क्या मेरे रंग या CSS कहीं अपलोड होते हैं?

नहीं। ग्रेडिएंट पूरी तरह आपके ब्राउज़र में स्थानीय स्ट्रिंग और रंग गणित से बनाया जाता है — कोई रंग, CSS या सेटिंग कभी किसी सर्वर पर नहीं भेजी जाती, इसलिए यह ऑफ़लाइन काम करता है और आपके काम को निजी रखता है।