CSS ग्रेडिएंट जेनरेटर लीनियर, रेडियल और कॉनिक ग्रेडिएंट को विज़ुअली डिज़ाइन करता है, ताकि आपको कभी भी background-image वैल्यू को हाथ से ट्यून न करना पड़े। एक ग्रेडिएंट टाइप चुनें, एंगल स्लाइडर या सेंटर पोज़िशन को ड्रैग करें, फिर नेटिव कलर पिकर और सटीक पर्सेंट पोज़िशन के साथ जितने चाहें उतने कलर स्टॉप्स जोड़ें, हटाएं या रीकलर करें। एडिट करते ही एक लाइव प्रीव्यू पैनल तुरंत अपडेट होता है, और यह टूल एक कॉपी-रेडी `background: ...;` डिक्लेरेशन देता है जिसे आप सीधे किसी स्टाइलशीट में पेस्ट कर सकते हैं। यह उन फ्रंट-एंड डेवलपर्स और डिज़ाइनर्स के लिए बनाया गया है जो बिना कोई डिज़ाइन ऐप खोले हीरो बैनर, बटन या कार्ड के बैकग्राउंड को प्रोटोटाइप करना चाहते हैं। सब कुछ आपके ब्राउज़र में लोकली चलता है, इसलिए आपके बनाए ग्रेडिएंट कभी कहीं अपलोड नहीं होते।
विशेषताएँ
एक ही टूल में लीनियर, रेडियल और कॉनिक ग्रेडिएंट टाइप्स
असीमित कलर स्टॉप्स, हर एक में नेटिव कलर पिकर और पर्सेंट पोज़िशन
ऐड और रिमूव बटन से स्टॉप्स तुरंत जोड़ें या हटाएं
लीनियर और कॉनिक ग्रेडिएंट के लिए एंगल स्लाइडर और नंबर इनपुट
रेडियल ग्रेडिएंट के लिए सर्कल/एलिप्स शेप टॉगल और ड्रैग करने योग्य सेंटर पोज़िशन
हर बदलाव पर लाइव प्रीव्यू पैनल तुरंत अपडेट होता है
कॉपी-रेडी CSS `background: ...;` डिक्लेरेशन जनरेट करता है
पूरी तरह आपके ब्राउज़र में चलता है, कुछ भी अपलोड नहीं होता
CSS ग्रेडिएंट जेनरेटर का उपयोग कैसे करें
ग्रेडिएंट टाइप के रूप में लीनियर, रेडियल या कॉनिक चुनें
एंगल सेट करें (लीनियर/कॉनिक) या शेप और सेंटर पोज़िशन सेट करें (रेडियल)
कलर स्टॉप्स जोड़ें और हर एक का कलर और पर्सेंट पोज़िशन एडजस्ट करें
लाल से नीले रंग तक, 90 डिग्री एंगल पर एक टू-स्टॉप लीनियर ग्रेडिएंट।
सामान्य त्रुटियाँ और समस्या निवारण
ग्रेडिएंट फ्लैट दिखता है या सिर्फ एक ही रंग दिखाता है। — अलग-अलग पोज़िशन पर कम से कम दो कलर स्टॉप्स जोड़ें — एक ही स्टॉप, या एक ही पोज़िशन पर दो स्टॉप्स, कोई विज़िबल ट्रांज़िशन नहीं देंगे।
रेडियल ग्रेडिएंट सर्कल की बजाय ओवल की तरह दिखता है। — शेप टॉगल को सर्कल पर सेट करें, या एलिप्स पर ही रहने दें अगर आप चाहते हैं कि ग्रेडिएंट एलिमेंट के एस्पेक्ट रेशियो के हिसाब से खिंचे।
कॉनिक ग्रेडिएंट गलत जगह से शुरू होता है। — एंगल वैल्यू एडजस्ट करें — कॉनिक ग्रेडिएंट अपना स्टार्टिंग स्टॉप चुने गए एंगल से क्लॉकवाइज़ घुमाते हैं, 0deg पर ऊपर की ओर पॉइंट करते हुए शुरू होते हैं।
स्टॉप्स के बीच रंग बैंडेड या मटमैले दिखते हैं। — ब्राउज़र को दो बहुत अलग रंगों को एक बड़े गैप में इंटरपोलेट करने देने की बजाय, ट्रांज़िशन पॉइंट के पास एक इंटरमीडिएट कलर स्टॉप जोड़ें।
अक्सर पूछे जाने वाले प्रश्न
CSS ग्रेडिएंट जेनरेटर क्या है?
यह एक विज़ुअल टूल है जो कलर स्टॉप्स से लीनियर, रेडियल और कॉनिक CSS ग्रेडिएंट बनाता है, लाइव प्रीव्यू और कॉपी-रेडी background डिक्लेरेशन के साथ — ग्रेडिएंट सिंटैक्स हाथ से लिखने की ज़रूरत नहीं।
क्या CSS ग्रेडिएंट जेनरेटर सिर्फ लीनियर ही नहीं, रेडियल और कॉनिक ग्रेडिएंट भी बना सकता है?
हां। सेगमेंटेड कंट्रोल को रेडियल पर सेट करें — ड्रैग करने योग्य सेंटर वाले सर्कल या एलिप्स ग्रेडिएंट के लिए — या कॉनिक पर, जो चुने गए स्टार्ट एंगल से सेंटर के चारों ओर घूमता है।
ग्रेडिएंट टूल में मैं कितने कलर स्टॉप्स जोड़ सकता हूं?
जितने चाहें उतने। नया स्टॉप जोड़ने के लिए Add stop बटन इस्तेमाल करें, और किसी भी रो का रिमूव बटन इस्तेमाल करके उसे डिलीट करें, जब तक कम से कम एक स्टॉप बचा रहे।
क्या CSS ग्रेडिएंट जेनरेटर मेरे रंगों को कहीं अपलोड करता है?
नहीं। CSS ग्रेडिएंट जेनरेटर पूरी तरह आपके ब्राउज़र में चलता है। आपके डिज़ाइन किए रंग, पोज़िशन और ग्रेडिएंट कभी आपकी डिवाइस से बाहर नहीं जाते।
ग्रेडिएंट जेनरेटर कौन-सा CSS आउटपुट करता है?
एक सिंगल background डिक्लेरेशन, जैसे background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);, जिसे आप स्टाइलशीट, style एट्रिब्यूट या CSS-in-JS टेम्पलेट में सीधे पेस्ट कर सकते हैं।
क्या मैं रेडियल या कॉनिक ग्रेडिएंट के सेंटर के लिए सटीक पोज़िशन सेट कर सकता हूं?
हां। Center X और Center Y स्लाइडर्स आपको ग्रेडिएंट के ऑरिजिन को हर दिशा में एलिमेंट के 0% से 100% तक कहीं भी मूव करने देते हैं।
संबंधित टूल
CSS कलर कन्वर्टर — लाइव स्वैच के साथ HEX, RGB और HSL के बीच कन्वर्ट करें।
Color Format Converter — किसी भी CSS रंग को एक साथ HEX, RGB, HSL, HWB, LAB, LCH, OKLCH और OKLAB में बदलें।
Tailwind Color जेनरेटर — एक ब्रांड रंग को OKLCH में एक पूर्ण 50-950 Tailwind शेड स्केल में बदलें।
CSS Grid जेनरेटर — एक CSS grid को विज़ुअल रूप से डिज़ाइन करें और साफ़ grid-template CSS कॉपी करें।
cubic-bezier() जेनरेटर — दो कंट्रोल बिंदु खींचकर एक CSS cubic-bezier() ईज़िंग वक्र आकार दें और टाइमिंग फ़ंक्शन कॉपी करें।