CSS ग्रेडिएंट जनरेटर: लीनियर और रेडियल

Gradient Generator क्या है?

Gradient Generator एक ब्राउज़र-आधारित विज़ुअल एडिटर है जो CSS ग्रेडिएंट — लीनियर, रेडियल और कोनिक — बनाने के लिए उपयोग होता है, जिसमें कई कलर स्टॉप्स और समायोज्य पैरामीटर होते हैं। यह प्रोडक्शन-रेडी CSS आउटपुट करता है जिसे किसी भी स्टाइलशीट में कॉपी किया जा सकता है। टूल हर बदलाव पर रियल-टाइम में ग्रेडिएंट का प्रीव्यू दिखाता है, जिससे एडिटर और ब्राउज़र डेवलपर टूल्स के बीच अनुमान लगाने की ज़रूरत नहीं रहती। डिज़ाइनर इसका उपयोग ग्रेडिएंट बैकग्राउंड प्रोटोटाइप करने और सटीक CSS जनरेट करने के लिए करते हैं; डेवलपर इसे स्केलेबल एसेट्स के लिए SVG ग्रेडिएंट फ़ाइलें एक्सपोर्ट करने के लिए उपयोग करते हैं।

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

• लीनियर, रेडियल और कोनिक ग्रेडिएंट — एक क्लिक से तीन अलग ग्रेडिएंट टाइप चुनें। प्रत्येक टाइप सही CSS फंक्शन आउटपुट करता है: linear-gradient(), radial-gradient() या conic-gradient()।
• पोज़िशन के साथ कई कलर स्टॉप्स — जितने चाहें उतने कलर स्टॉप्स जोड़ें। प्रत्येक स्टॉप में कलर पिकर, hex इनपुट और 0% से 100% तक पोज़िशन स्लाइडर है। न्यूनतम दो स्टॉप्स हैं; अगर आप आखिरी दो हटाने की कोशिश करते हैं तो टूल एरर टोस्ट दिखाता है।
• समायोज्य ग्रेडिएंट एंगल — एक स्लाइडर लीनियर और कोनिक ग्रेडिएंट टाइप के लिए 0° से 360° तक एंगल नियंत्रित करता है। एंगल CSS आउटपुट में सीधे एम्बेड होता है।
• रियल-टाइम CSS कोड जनरेशन — CSS आउटपुट कार्ड हर बदलाव पर तुरंत अपडेट होता है। आउटपुट फॉर्मेट है background: linear-gradient(90deg, #8E2DE2 0%, #4A00E0 100%); — पेस्ट करने के लिए तैयार।
• ग्रेडिएंट का तत्काल प्रीव्यू — टूल के शीर्ष पर 256px ऊंचा प्रीव्यू पैनल लाइव CSS वैल्यू का उपयोग करके ग्रेडिएंट रेंडर करता है।
• एक क्लिक से CSS कॉपी — CSS कॉपी बटन पूरी background: ...; डिक्लेरेशन क्लिपबोर्ड में कॉपी करता है और हिस्ट्री में एंट्री लॉग करता है।
• रिपीटिंग ग्रेडिएंट सपोर्ट — अभी अलग कंट्रोल के रूप में नहीं दिखता, लेकिन CSS आउटपुट को मैन्युअली linear-gradient से repeating-linear-gradient में बदला जा सकता है।
• ब्राउज़र-कम्पैटिबल CSS आउटपुट — जनरेट किया गया CSS सभी आधुनिक ब्राउज़रों द्वारा समर्थित स्टैंडर्ड अनप्रीफिक्स्ड सिंटैक्स का उपयोग करता है।

Gradient Generator का उपयोग कैसे करें

चरण 1: ग्रेडिएंट टाइप चुनें

जल्द आ रहा है: Gradient Generator पर जाएं। टूल डिफ़ॉल्ट लीनियर ग्रेडिएंट के साथ खुलता है — #8E2DE2 (वायलेट) से 0% पर #33FFDD (चमकीला टील) 100% पर, 90 डिग्री पर रेंडर।

Gradient Type कार्ड में तीन बटन में से एक पर क्लिक करें: Linear, Radial, या Conic। प्रीव्यू तुरंत अपडेट होता है। लीनियर और कोनिक टाइप के लिए, टाइप सेलेक्टर के नीचे एंगल स्लाइडर दिखाई देता है।

चरण 2: एंगल सेट करें (केवल लीनियर और कोनिक)

Angle स्लाइडर को 0 से 360 डिग्री के बीच खींचें। वर्तमान एंगल वैल्यू लेबल के रूप में दिखती है (जैसे Angle: 135°)। 0° ऊपर से नीचे, 90° बाएं से दाएं, 180° नीचे से ऊपर और 270° दाएं से बाएं। प्रीव्यू हर स्लाइडर मूवमेंट पर अपडेट होता है।

रेडियल ग्रेडिएंट के लिए, एंगल कंट्रोल छिपा होता है क्योंकि radial-gradient(circle, ...) एंगल पैरामीटर का उपयोग नहीं करता।

चरण 3: कलर स्टॉप्स कॉन्फ़िगर करें

Color Stops कार्ड प्रत्येक स्टॉप को एक पंक्ति में सूचीबद्ध करता है जिसमें:

• एक नेटिव कलर इनपुट (रंगीन वर्ग) — ब्राउज़र कलर पिकर खोलने के लिए क्लिक करें
• एक hex टेक्स्ट इनपुट जो वर्तमान कलर वैल्यू दिखाता है
• एक पोज़िशन स्लाइडर 0 से 100% तक
• एक पोज़िशन प्रतिशत लेबल (जैसे 45%)
• एक डिलीट बटन (ट्रैश आइकन)

कलर इनपुट और hex टेक्स्ट इनपुट दोनों एक ही स्टॉप अपडेट करते हैं। किसी भी को बदलने से प्रीव्यू तुरंत रिफ्रेश होता है।

Add Stop पर क्लिक करके एक नया कलर स्टॉप रैंडम पोज़िशन पर सफेद डिफ़ॉल्ट कलर के साथ जोड़ें। जहां ज़रूरत हो वहां रखने के लिए कलर और पोज़िशन एडिट करें।

चरण 4: कलर स्टॉप हटाएं

किसी भी स्टॉप पंक्ति पर Trash आइकन पर क्लिक करके उसे हटाएं। अगर केवल दो स्टॉप्स बचे हों, Trash पर क्लिक करने से "Minimum 2 color stops required" एरर मैसेज टोस्ट के रूप में दिखेगा और दोनों स्टॉप्स बरकरार रहेंगे।

चरण 5: CSS आउटपुट कॉपी करें

CSS Output कार्ड पूरी डिक्लेरेशन दिखाता है:

background: linear-gradient(90deg, #8e2de2 0%, #33ffdd 100%);

इस स्ट्रिंग को क्लिपबोर्ड में कॉपी करने के लिए Copy CSS पर क्लिक करें। एक सफलता टोस्ट कॉपी की पुष्टि करता है। एंट्री History पैनल (सपोर्टर अकाउंट के लिए) में ग्रेडिएंट टाइप, एंगल और CSS वैल्यू के साथ लॉग भी होती है।

चरण 6: SVG के रूप में एक्सपोर्ट करें (सपोर्टर फीचर)

ग्रेडिएंट को SVG फ़ाइल के रूप में एक्सपोर्ट करने के लिए SVG बटन (डाउनलोड आइकन के साथ) पर क्लिक करें। लीनियर ग्रेडिएंट के लिए, SVG gradientTransform="rotate(angle, 0.5, 0.5)" एट्रिब्यूट वाले <linearGradient> एलिमेंट का उपयोग करता है। रेडियल ग्रेडिएंट के लिए <radialGradient> उपयोग होता है। फ़ाइल gradient.svg के रूप में डाउनलोड होती है। यह एक प्रीमियम सपोर्टर फीचर है।

चरण 7: रैंडमाइज़ या रीसेट करें

नए ग्रेडिएंट के लिए Randomize (सर्कुलर ऐरो आइकन) पर क्लिक करें जो दो रैंडम कलर और रैंडम एंगल के साथ होगा। ग्रेडिएंट को डिफ़ॉल्ट वायलेट-से-टील लीनियर ग्रेडिएंट 90° पर रीसेट करने के लिए Clear पर क्लिक करें।

व्यावहारिक उदाहरण

Hero सेक्शन बैकग्राउंड ग्रेडिएंट

आप एक लैंडिंग पेज हीरो के लिए #667EEA (मध्यम ब्लू-वायलेट) से #764BA2 (गहरा पर्पल) तक 135° डायगोनल ग्रेडिएंट चाहते हैं। टाइप Linear पर सेट करें, एंगल स्लाइडर को 135 पर खींचें, स्टॉप 1 को #667EEA पर 0% और स्टॉप 2 को #764BA2 पर 100% बदलें। Copy CSS पर क्लिक करें और पेस्ट करें:

.hero {
  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
}

रेडियल स्पॉटलाइट इफेक्ट

आप एक रेडियल ग्रेडिएंट चाहते हैं जो एक कार्ड के केंद्र को स्पॉटलाइट करे। टाइप Radial पर सेट करें। स्टॉप 1 को #FFFFFF पर 0% बदलें, 50% पर #F1F5F9 के साथ एक तीसरा स्टॉप जोड़ें और स्टॉप 2 (अब स्टॉप 3) को #CBD5E1 पर 100% सेट करें। आउटपुट:

background: radial-gradient(circle, #FFFFFF 0%, #F1F5F9 50%, #CBD5E1 100%);

इसे सफेद कार्ड सतहों पर सूक्ष्म डेप्थ इफेक्ट के रूप में उपयोग करें।

कोनिक कलर व्हील प्रीव्यू

टाइप Conic और एंगल 0° पर सेट करें। छह समान दूरी पर स्टॉप्स जोड़ें: लाल (#FF0000) 0% पर, पीला (#FFFF00) 17% पर, हरा (#00FF00) 33% पर, सियान (#00FFFF) 50% पर, नीला (#0000FF) 67% पर और मैजेंटा (#FF00FF) 83% पर। आखिरी स्टॉप स्वाभाविक रूप से लाल पर वापस बंद होता है। SVG के रूप में एक्सपोर्ट करें ताकि व्हील को कलर-थ्योरी डायग्राम में उपयोग किया जा सके।

टिप्स और बेस्ट प्रैक्टिसेज़

CSS जनरेट करने से पहले कलर स्टॉप्स पोज़िशन के अनुसार सॉर्ट होते हैं। आप किसी भी क्रम में स्टॉप्स जोड़ सकते हैं — टूल आउटपुट लिखने से पहले हमेशा उन्हें आरोही क्रम में सॉर्ट करता है। इसका मतलब है कि स्लाइडर में 0% स्टॉप को 50% स्टॉप से आगे खींचने से CSS सही ढंग से पुनर्व्यवस्थित होगा।

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

मौजूदा ग्रेडिएंट को रिवर्स-इंजीनियर करने के लिए पेस्ट करें। टूल अभी सीधे CSS ग्रेडिएंट स्ट्रिंग पेस्ट करना सपोर्ट नहीं करता। हालांकि, आप मौजूदा ग्रेडिएंट से कलर स्टॉप वैल्यू निकाल सकते हैं और उन्हें मैन्युअली दर्ज कर सकते हैं।

शेयरेबल URL सभी ग्रेडिएंट पैरामीटर एन्कोड करते हैं। ग्रेडिएंट टाइप, एंगल और कलर स्टॉप्स (एक कॉम्पैक्ट color:position स्ट्रिंग के रूप में) पेज URL में सीरियलाइज़ होते हैं। किसी टीममेंबर के साथ अपनी सटीक ग्रेडिएंट कॉन्फ़िगरेशन शेयर करने के लिए URL कॉपी करें।

SVG एक्सपोर्ट 400×200px कैनवस का उपयोग करता है। एक्सपोर्ट की गई gradient.svg में width="400" height="200" और एक <rect> एलिमेंट है जो ग्रेडिएंट से पूरी कैनवस भरता है। SVG रेज़ोल्यूशन-इंडिपेंडेंट होने के कारण इसे मुक्त रूप से स्केल करें।

न्यूनतम दो स्टॉप्स टोस्ट मैसेज के साथ लागू होते हैं। अगर आप तब स्टॉप हटाने की कोशिश करते हैं जब केवल दो बचे हैं, तो एरर टोस्ट पढ़ता है "Minimum 2 color stops required" — ग्रेडिएंट को वैध CSS होने के लिए कम से कम दो स्टॉप्स चाहिए।

सामान्य समस्याएं और समस्या निवारण

CSS आउटपुट background: ; (खाली ग्रेडिएंट) दिखाता है। यह सामान्य उपयोग में नहीं होना चाहिए। अगर कलर स्टॉप्स ऐरे किसी तरह खाली है (केवल URL स्टेट करप्शन से संभव), तो generateCss फंक्शन एक खाली स्ट्रिंग लौटाता है। Reset बटन से टूल क्लियर करें या डिफ़ॉल्ट स्टेट को रिस्टोर करने के लिए पेज रिलोड करें।

कलर स्टॉप hex इनपुट टाइप करने के बाद गलत कलर दिखाता है। hex इनपुट सीधे स्टॉप के कलर वैल्यू से जुड़ा है। अगर आप एक इनवैलिड hex (जैसे #ZZZZZZ) टाइप करते हैं, तो कलर पिकर इनपुट अपडेट नहीं होगा और पिछला वैलिड कलर दिख सकता है। hex को एक वैलिड 6-अंकीय वैल्यू से सही करें।

पोज़िशन स्लाइडर को सटीक रूप से पोज़िशन करना मुश्किल है। स्लाइडर 1% इंक्रीमेंट में वैल्यू स्वीकार करता है। सटीक पोज़िशनिंग के लिए, प्रतिशत सीधे टाइप करें — हालांकि, वर्तमान UI केवल स्लाइडर का उपयोग करता है। पास के राउंड नंबर का उपयोग करें और CSS आउटपुट में वेरिफाई करें।

रेडियल ग्रेडिएंट ऑफ-सेंटर दिखता है। जनरेट किया गया रेडियल ग्रेडिएंट radial-gradient(circle, ...) का उपयोग करता है जो डिफ़ॉल्ट रूप से 50% 50% पर केंद्रित होता है। UI में अभी circle at X% Y% जोड़ना उपलब्ध नहीं है। केंद्र को पुनः स्थापित करने के लिए अपनी स्टाइलशीट में मैन्युअली कॉपी किए गए CSS को एडिट करें।

SVG एक्सपोर्ट केवल लीनियर या रेडियल दिखाता है। SVG एक्सपोर्ट फंक्शन लीनियर ग्रेडिएंट को <linearGradient> और अन्य सभी टाइप (कोनिक सहित) को <radialGradient> के रूप में हैंडल करता है। कोनिक ग्रेडिएंट का SVG में कोई समकक्ष नहीं है, इसलिए वे SVG एक्सपोर्ट में रेडियल पर फॉलबैक होते हैं।

हिस्ट्री रिस्टोर केवल आंशिक रूप से स्टेट रिस्टोर करता है। हिस्ट्री रिस्टोर फंक्शन स्टोर्ड हिस्ट्री एंट्री टेक्स्ट से ग्रेडिएंट टाइप और एंगल पार्स करता है। यह हिस्ट्री से कलर स्टॉप्स रिस्टोर नहीं करता (कलर स्टॉप्स शेयरेबल URL स्टेट में संरक्षित होते हैं)। पूर्ण स्टेट रिस्टोरेशन के लिए शेयर URL का उपयोग करें।

गोपनीयता और सुरक्षा

Gradient Generator पूरी तरह आपके ब्राउज़र में चलता है। CSS जनरेशन, कलर स्टॉप मैनेजमेंट और SVG एक्सपोर्ट लॉजिक सभी प्योर JavaScript हैं। कोई ग्रेडिएंट कॉन्फ़िगरेशन, कलर वैल्यू या उपयोग डेटा किसी बाहरी सर्वर पर नहीं भेजा जाता। SVG एक्सपोर्ट एक लोकल फ़ाइल लिखने के लिए downloadText का उपयोग करता है — कोई अपलोड नहीं होता। टूल पेज लोड होने के बाद पूरी तरह ऑफलाइन काम करता है और प्रोप्राइटरी या अनरिलीज़्ड डिज़ाइन एसेट के साथ उपयोग के लिए सुरक्षित है।

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

क्या Gradient Generator मुफ़्त है?

हां। सभी कोर फीचर — लीनियर, रेडियल और कोनिक ग्रेडिएंट क्रिएशन, कई कलर स्टॉप्स, एंगल कंट्रोल, CSS कॉपी और रैंडमाइज़ेशन — बिना किसी अकाउंट के मुफ्त हैं। SVG एक्सपोर्ट बटन एक प्रीमियम सपोर्टर फीचर है जिसके लिए Ko-fi सपोर्टर सब्सक्रिप्शन की आवश्यकता है।

क्या Gradient Generator ऑफलाइन काम करता है?

हां। एक बार पेज लोड होने के बाद, सभी ग्रेडिएंट जनरेशन, प्रीव्यू रेंडरिंग और CSS आउटपुट इंटरनेट एक्सेस के बिना काम करते हैं। केवल ऑनलाइन-डिपेंडेंट फीचर प्रारंभिक पेज लोड और शेयर URL हैं, जो URL में ही स्टेट एन्कोड करता है (स्टेट पढ़ने के लिए कोई सर्वर कॉल की ज़रूरत नहीं)।

क्या Gradient Generator के साथ मेरा डेटा सुरक्षित है?

हां। कोई ग्रेडिएंट पैरामीटर या कलर वैल्यू किसी सर्वर को ट्रांसमिट नहीं की जाती। टूल में ग्रेडिएंट जनरेशन के लिए कोई बैकएंड नहीं है। आपके डिज़ाइन पूरी तरह आपके डिवाइस पर रहते हैं। शेयरेबल URL URL स्ट्रिंग में ही स्टेट एन्कोड करता है — कोई सर्वर इसे स्टोर नहीं करता।

टूल कौन से CSS ग्रेडिएंट टाइप सपोर्ट करता है?

टूल तीन CSS ग्रेडिएंट टाइप सपोर्ट करता है: linear-gradient(), radial-gradient() और conic-gradient()। CSS आउटपुट स्टैंडर्ड अनप्रीफिक्स्ड सिंटैक्स का उपयोग करता है। ब्राउज़र सपोर्ट के लिए, linear-gradient और radial-gradient सभी आधुनिक ब्राउज़रों में काम करते हैं; conic-gradient के लिए Chrome 69+, Safari 12.1+ और Firefox 83+ चाहिए।

मैं मल्टी-स्टॉप ग्रेडिएंट कैसे बनाऊं?

अतिरिक्त कलर स्टॉप्स जोड़ने के लिए Add Stop पर क्लिक करें। प्रत्येक नया स्टॉप रैंडम पोज़िशन पर सफेद डिफ़ॉल्ट कलर के साथ दिखाई देता है। कलर सेट करने के लिए कलर स्वैच पर क्लिक करें या hex वैल्यू टाइप करें, फिर इसे रखने के लिए पोज़िशन स्लाइडर खींचें। स्टॉप की संख्या की कोई ऊपरी सीमा नहीं है।

क्या मैं कलर स्टॉप हटा सकता हूं?

हां। किसी भी स्टॉप पंक्ति पर Trash आइकन पर क्लिक करें। अगर केवल दो स्टॉप बचे हों, तो टूल हटाने को रोकता है और एक टोस्ट दिखाता है: "Minimum 2 color stops required." वैलिड CSS ग्रेडिएंट के लिए कम से कम दो कलर स्टॉप्स चाहिए।

एक्सपोर्ट की गई SVG फ़ाइल में क्या होता है?

SVG एक्सपोर्ट एक 400×200px फ़ाइल बनाता है जिसमें <defs> ब्लॉक है जिसमें <linearGradient> (लीनियर टाइप के लिए) या <radialGradient> (रेडियल और कोनिक टाइप के लिए) है, और एक <rect> एलिमेंट जो उस ग्रेडिएंट से पूरी कैनवस भरता है। फ़ाइल gradient.svg नाम से स्वचालित रूप से डाउनलोड होती है।

क्या मैं Tailwind CSS में जनरेट किए गए CSS का उपयोग कर सकता हूं?

हां। linear-gradient(...) वैल्यू (background: प्रीफिक्स के बिना) को अपनी Tailwind config में कस्टम बैकग्राउंड इमेज के रूप में पेस्ट करें:

backgroundImage: {
  'brand-gradient': 'linear-gradient(135deg, #667EEA 0%, #764BA2 100%)',
}

फिर अपने HTML में इसे bg-brand-gradient के रूप में उपयोग करें।

क्या टूल ट्रांसपेरेंट कलर स्टॉप्स सपोर्ट करता है?

कलर इनपुट केवल ओपेक hex वैल्यू (6-अंकीय) स्वीकार करते हैं। ट्रांसपेरेंसी के साथ ग्रेडिएंट बनाने के लिए, CSS आउटपुट कॉपी करें और अपनी स्टाइलशीट में स्टॉप कलर को मैन्युअली rgba() नोटेशन में बदलें, उदाहरण के लिए: linear-gradient(90deg, rgba(142, 45, 226, 0) 0%, #4A00E0 100%)।

मैं किसी के साथ ग्रेडिएंट कैसे शेयर करूं?

अपना ग्रेडिएंट कॉन्फ़िगर करने के बाद अपने ब्राउज़र के एड्रेस बार से URL कॉपी करें। URL ग्रेडिएंट टाइप, एंगल और सभी कलर स्टॉप वैल्यू एन्कोड करता है। दूसरे डिवाइस पर वह URL खोलने से बिल्कुल वही ग्रेडिएंट लोड होता है। पेज के नीचे शेयर बटन का उपयोग करके Twitter, LinkedIn, Reddit पर पोस्ट कर सकते हैं या लिंक सीधे कॉपी कर सकते हैं।

संबंधित टूल्स

• जल्द आ रहा है: UI Gradients — नामित ग्रेडिएंट की क्यूरेटेड लाइब्रेरी ब्राउज़ करें और उनकी CSS वैल्यू सीधे कॉपी करें।
• Color Picker — ग्रेडिएंट स्टॉप्स के रूप में जोड़ने से पहले सटीक hex कलर खोजने के लिए EyeDropper या फॉर्मेट इनपुट का उपयोग करें।
• जल्द आ रहा है: Color Blender — दो वैल्यू के बीच सहज मध्यवर्ती रंग जनरेट करें, मल्टी-स्टॉप ग्रेडिएंट की मैन्युअल योजना के लिए उपयोगी।
• जल्द आ रहा है: Palette Generator — ग्रेडिएंट स्टॉप स्रोतों के रूप में उपयोग करने के लिए सामंजस्यपूर्ण कलर पैलेट जनरेट करें।

अभी Gradient Generator आज़माएं: जल्द आ रहा है: Glyph Widgets Gradient Generator