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

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

CSS ग्रेडिएंट दो या अधिक रंगों के बीच एक सहज परिवर्तन है, जिसे ब्राउज़र द्वारा किसी रेखा, किरण, या कोण के बारे में चित्रित किया जाता है। अच्छी तरह उपयोग करने पर, एक ग्रेडिएंट 200-किलोबाइट की पृष्ठभूमि छवि की जगह ले सकता है — यह किसी भी आकार पर स्केल होता है, हर स्क्रीन पर तेज़ रहता है, और CSS की एक पंक्ति में आता है। मुश्किल हिस्सा सिंटैक्स लिखना नहीं है, बल्कि रंग, कोण, और स्टॉप ट्यून करते समय परिणाम देखना है।

यह पृष्ठ उसके लिए एक लाइव वर्कबेंच है। आप स्टॉप खींचते हैं, कोण स्लाइड करते हैं, पाँच ग्रेडिएंट प्रकार के बीच स्विच करते हैं, और पृष्ठ वह सटीक linear-gradient(...) (या radial-, conic-, repeating-) घोषणा उत्सर्जित करता है जो आपके स्टाइलशीट को चाहिए — साथ ही एक चिपकाने-के-लिए-तैयार Tailwind v4 @theme स्निपेट जो हर रंग को पुनः उपयोग योग्य टोकन में बदल देता है।

इसका उपयोग कैसे करें#

1. कोई प्रकार चुनें:
   • रैखिक — रंग एक चुने गए कोण पर सीधी रेखा के साथ परिवर्तित होते हैं। डिफ़ॉल्ट; अधिकांश उपयोग मामलों को कवर करता है।
   • रेडियल — रंग केंद्र बिंदु से बाहर की ओर निकलते हैं। स्पॉटलाइट और विगनेट हेतु अच्छा।
   • शंक्वाकार — रंग पाई चार्ट की तरह केंद्र के बारे में घूमते हैं। कलर व्हील और स्पिनर पृष्ठभूमि हेतु उपयोगी।
   • पुनरावर्ती रैखिक / पुनरावर्ती रेडियल — वही ग्रेडिएंट टाइल किया हुआ, धारियाँ या संकेंद्री वलय बनाता है।
2. रैखिक और शंक्वाकार प्रकार हेतु, कोण स्लाइडर (0–359°) खींचें। पूर्वावलोकन लाइव अद्यतन होता है; 0° ऊपर की ओर, 90° दायें की ओर, 135° क्लासिक ऊपर-बायाँ-से-नीचे-दायाँ विकर्ण है।
3. रेडियल प्रकार हेतु, कोई आकार चुनें — वृत्त या दीर्घवृत्त (अनुक्रियाशील पूर्ण-ब्लीड पृष्ठभूमि हेतु डिफ़ॉल्ट)।
4. अपने कलर स्टॉप प्रबंधित करें:
   • हर स्टॉप का एक रंग स्वॉच और ग्रेडिएंट पट्टी पर स्थिति (0–100%) है।
   • पट्टी पर हैंडल खींचकर स्टॉप खिसकाएँ, या सटीक स्थिति टाइप करें।
   • नया जोड़ने हेतु स्टॉप जोड़ें क्लिक करें; किसी स्टॉप को हटाने हेतु उस पर × क्लिक करें।
   • ग्रेडिएंट हेतु कम से कम दो स्टॉप चाहिए।
5. नीचे दो आउटपुट पढ़ें: CSS (कच्चा ग्रेडिएंट मान) और Tailwind v4 (एक @theme ब्लॉक जो हर रंग को --color-grad-* टोकन के रूप में पंजीकृत करता है, साथ ही एक .bg-gradient यूटिलिटी जो उनका उपभोग करती है)। प्रत्येक के बगल में कॉपी बटन का उपयोग करें।

मुख्य विशेषताएँ#

• एक टूल में पाँच ग्रेडिएंट प्रकार। रैखिक, रेडियल, शंक्वाकार, और दोनों पुनरावर्ती वेरिएंट — रंग पुनः दर्ज किए बिना स्विच करें।
• लाइव, पिक्सेल-सटीक पूर्वावलोकन। दाईं ओर का बड़ा ब्लॉक वह वास्तविक ग्रेडिएंट है जिसे आप शिप करेंगे; जो दिखता है वही आपका स्टाइलशीट पाता है।
• ड्रैग-हैंडल स्टॉप पट्टी। किसी भी रंग स्टॉप को खींचकर स्थानांतरित करें; खिसकाने पर प्रतिशत अद्यतन होता है।
• दोहरी आउटपुट। हाथ से लिखे स्टाइलशीट हेतु कच्चा CSS, और यूटिलिटी-फ़र्स्ट प्रोजेक्ट हेतु Tailwind v4 @theme स्निपेट (हर स्टॉप एक --color-grad-* टोकन बन जाता है, जिसे .bg-gradient यूटिलिटी उपभोग करती है) — दोनों हमेशा सिंक में।
• कोण रीडआउट। सटीक डिग्री स्लाइडर के बगल में दिखती है, ताकि आप ग्रेडिएंट को कहीं और सटीक रूप से पुनः उत्पन्न कर सकें।
• शून्य अपलोड। रंग, स्टॉप, और कोण कभी ब्राउज़र से बाहर नहीं जाते।

विस्तृत उदाहरण#

मान लीजिए आप इंडिगो से टील तक जाने वाला एक शांत, थोड़ा विकर्ण ब्रांड ग्रेडिएंट चाहते हैं। रैखिक चुनें, कोण 135° पर सेट करें, और दो स्टॉप उपयोग करें:

• स्टॉप 1: 0% पर #4F46E5 (इंडिगो)
• स्टॉप 2: 100% पर #0D9488 (टील)

CSS आउटपुट है:

linear-gradient(135deg, #4F46E5 0%, #0D9488 100%)

और Tailwind v4 स्निपेट है:

@theme {
  --color-grad-1: #4F46E5;
  --color-grad-2: #0D9488;
}

.bg-gradient {
  background-image: linear-gradient(135deg, var(--color-grad-1) 0%, var(--color-grad-2) 100%);
}

hex मानों को इनलाइन करने के बजाय, Tailwind आउटपुट हर स्टॉप को @theme के अंदर --color-grad-* डिज़ाइन टोकन के रूप में पंजीकृत करता है, फिर एकल .bg-gradient यूटिलिटी को var(...) के माध्यम से उनकी ओर इशारा करता है। एक चर बदलें और हर जगह जो उसका उपभोग करती है एक साथ अद्यतन हो जाती है। बीच में तीसरा, नरम रंग चाहिए? स्टॉप जोड़ें क्लिक करें, 50% पर #7C3AED सेट करें, और स्निपेट में --color-grad-2: #7C3AED टोकन जुड़ जाता है जबकि टील --color-grad-3 पर खिसक जाता है — स्टॉप हमेशा स्थिति से पुनः क्रमांकित होते हैं, इसलिए नाम कभी पट्टी से असिंक नहीं होते।

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

रैखिक, रेडियल और शंक्वाकार में क्या अंतर है?#

रैखिक किसी कोण द्वारा परिभाषित सीधी रेखा के साथ परिवर्तित होता है। रेडियल किसी बिंदु से बाहर की ओर परिवर्तित होता है, रंग का वृत्त या दीर्घवृत्त बनाता है। शंक्वाकार किसी बिंदु के बारे में परिवर्तित होता है — एक कलर व्हील कल्पना करें जो घूम रहा है, जहाँ हर कोण एक भिन्न रंग है। प्रत्येक के पुनरावर्ती वेरिएंट धारियाँ या वलय बनाने हेतु पैटर्न टाइल करते हैं।

Tailwind आउटपुट रंगों को इनलाइन करने के बजाय --color-grad-* चर क्यों परिभाषित करता है?#

Tailwind v4 ने कॉन्फ़िगरेशन को @theme ब्लॉक के माध्यम से CSS में ले जाया, जहाँ हर प्रविष्टि एक पुनः उपयोग योग्य डिज़ाइन टोकन बन जाती है। हर स्टॉप को --color-grad-1, --color-grad-2, … के रूप में उत्सर्जित करके और .bg-gradient को उन्हें var(...) से संदर्भित करके, स्निपेट आपको एक पैलेट देता है जिसे आप कहीं भी पुनः उपयोग कर सकते हैं — बॉर्डर, टेक्स्ट, छाया — केवल इस एक पृष्ठभूमि तक सीमित नहीं। एकल चर संपादित करें और हर उपभोक्ता एक साथ अद्यतन हो जाता है। (Tailwind v3 पर कोई @theme नहीं है; अपने स्टाइलशीट में इसके बजाय CSS आउटपुट चिपकाएँ।)

क्या मैं सहज मिश्रण के बजाय कठोर रंग कदम बना सकता हूँ?#

हाँ। दो स्टॉप को समान स्थिति दें — उदाहरण हेतु #000 50% और #fff 50%। उनके बीच कोई दूरी नहीं है, इसलिए मिश्रण की चौड़ाई शून्य है, और परिवर्तन एक कठोर रेखा बन जाता है। इसी तरह आप बिना किसी छवि के धारीदार या बैंडेड पृष्ठभूमि बनाते हैं।

शंक्वाकार ग्रेडिएंट मेरे डिज़ाइन टूल की तुलना में घुमा हुआ दिखता है। क्यों?#

भिन्न टूल शंक्वाकार ग्रेडिएंट के आरंभिक कोण को भिन्न ढंग से मापते हैं। CSS from कोण को शीर्ष (12 बजे) से दक्षिणावर्त मापता है। यदि आपका डिज़ाइन टूल दायें (3 बजे) से या वामावर्त मापता है, तो 90° घटाएँ या जोड़ें (या चिह्न बदलें) जब तक पूर्वावलोकन मेल न खाए।