CSS ग्रेडिएंट डिज़ाइन करें और कोड कॉपी करें
यह CSS ग्रेडिएंट जनरेटर <code>linear-gradient()</code>, <code>radial-gradient()</code> और <code>conic-gradient()</code> बैकग्राउंड को विज़ुअल तरीके से बनाता है। रंग जोड़ने के लिए स्टॉप बार पर क्लिक करें, उन्हें खींचकर सही जगह रखें, हर स्टॉप की ओपेसिटी सेट करें, फिर कोण, आकार या केंद्र बदलें, प्रीव्यू तुरंत अपडेट होता है। ठोस फ़ॉलबैक रंग के साथ CSS कॉपी करें, तैयार Tailwind क्लास कॉपी करें या ग्रेडिएंट को किसी भी साइज़ की PNG के रूप में एक्सपोर्ट करें। अपनी स्टाइलशीट से ग्रेडिएंट पेस्ट करके उसे यहां एडिट करें। सब कुछ आपके ब्राउज़र में लोकल रूप से चलता है।
CSS ग्रेडिएंट कैसे बनाएं
- 1लीनियर, रेडियल या कोनिक चुनें, या किसी प्रीसेट से शुरू करें।
- 2कलर स्टॉप जोड़ने के लिए स्टॉप बार पर कहीं भी क्लिक करें, स्टॉप को खिसकाने के लिए खींचें, और चुने हुए स्टॉप को हटाने के लिए Delete दबाएं। ऐरो कीज़ चुने हुए स्टॉप को 1% और Shift+ऐरो 10% खिसकाती हैं।
- 3हर स्टॉप का रंग और ओपेसिटी चुनें। कोई भी CSS रंग चलेगा: hex,
rgb(),hsl(),oklch()या रंग का नाम। - 4डायल से कोण सेट करें (15° पर स्नैप करने के लिए Shift दबाए रखें), या रेडियल और कोनिक ग्रेडिएंट में केंद्र खिसकाने के लिए प्रीव्यू पर खींचें।
- 5CSS या Tailwind क्लास कॉपी करें, या चौड़ाई और ऊंचाई सेट करके PNG डाउनलोड करें।
लीनियर, रेडियल और कोनिक ग्रेडिएंट
- linear-gradient()
- रंग एक कोण पर सीधी रेखा के साथ बदलते हैं। <code>0deg</code> ऊपर की ओर और <code>90deg</code> दाईं ओर इशारा करता है; कीवर्ड <code>to right</code> और <code>to bottom left</code> यही बात शब्दों में कहते हैं। ग्रेडिएंट रेखा बस इतनी लंबी होती है कि कोनों को पहला और आखिरी रंग मिल जाए।
- radial-gradient()
- रंग केंद्र से बाहर की ओर गोले या दीर्घवृत्त के रूप में फैलते हैं। साइज़ कीवर्ड तय करता है कि 100% कहां पड़ेगा: <code>farthest-corner</code> (डिफ़ॉल्ट) बॉक्स के सबसे दूर के कोने तक जाता है, <code>closest-side</code> सबसे नज़दीकी किनारे पर रुक जाता है।
- conic-gradient()
- रंग घड़ी की सुइयों की तरह केंद्र के चारों ओर घूमते हैं, <code>from</code> कोण से शुरू होकर। हार्ड स्टॉप से बिना किसी इमेज के पाई चार्ट और कलर व्हील बनते हैं।
कलर स्टॉप, हार्ड एज और ट्रांसपेरेंसी
हर कलर स्टॉप एक रंग और एक पोज़िशन है। दो स्टॉप के बीच ब्राउज़र रंगों को स्मूद तरीके से मिलाता है; जब दो स्टॉप की पोज़िशन एक ही हो, तो रंग अचानक बदलता है, धारियां, झंडे और पाई चार्ट ऐसे ही बनते हैं। दो पड़ोसी स्टॉप को एक ही रंग दें ताकि वह ठोस पट्टी बना रहे।
स्टॉप आंशिक रूप से पारदर्शी हो सकते हैं, इसलिए ग्रेडिएंट किसी इमेज को पेज में फ़ेड कर सकता है या हीरो इमेज के निचले हिस्से को गहरा कर सकता है ताकि सफ़ेद टेक्स्ट पढ़ने लायक रहे। आधुनिक ब्राउज़र पारदर्शी स्टॉप को प्रीमल्टिप्लाइड रंग में मिलाते हैं, इसलिए transparent तक फ़ेड करने पर बीच में अब ग्रे नहीं दिखता, फिर भी स्पष्टता के लिए जनरेटर साफ़ rgba() रंग लिखता है।
रिपीटिंग ग्रेडिएंट
repeating-linear-gradient() और उसके रेडियल व कोनिक रूप पहले और आखिरी स्टॉप के बीच के पैटर्न को पूरे बॉक्स पर दोहराते हैं। रिपीटिंग चालू करें और आखिरी स्टॉप को 100% से काफ़ी पहले, जैसे 10% पर, ले जाएं ताकि धारियां, छल्ले या किरणें बनें। अगर आखिरी स्टॉप 100% पर है, तो रिपीटिंग ग्रेडिएंट बिल्कुल सामान्य ग्रेडिएंट जैसा दिखता है।
फ़ॉलबैक रंग, Tailwind और PNG एक्सपोर्ट
ग्रेडिएंट इमेज होते हैं, इसलिए जो ब्राउज़र इन्हें नहीं बना सकता वह आपके टेक्स्ट के पीछे कुछ नहीं दिखाता। वैकल्पिक फ़ॉलबैक लाइन पहले एक ठोस background सेट करती है, जो आपके स्टॉप का औसत होता है, और उसके बाद की ग्रेडिएंट लाइन जहां ग्रेडिएंट चलते हैं वहां उसे ओवरराइड कर देती है।
Tailwind आउटपुट एक आर्बिट्ररी-वैल्यू क्लास है, जैसे bg-[linear-gradient(90deg,#ff7e5f_0%,#feb47b_100%)]। स्पेस अंडरस्कोर बन जाते हैं क्योंकि Tailwind क्लास नामों में स्पेस नहीं हो सकते; यह Tailwind 3 और 4 में बिना किसी कॉन्फ़िग के काम करता है।
PNG एक्सपोर्ट वही ग्रेडिएंट आपके चुने साइज़ में canvas पर बनाता है, हर तरफ़ 8192 पिक्सल तक, वॉलपेपर, सोशल इमेज या उन डिज़ाइन टूल्स के लिए जो CSS नहीं पढ़ सकते। कंट्रास्ट चेकर से अपने टेक्स्ट के लिए सही रंग चुनें, कलर कन्वर्टर से उन्हें अलग-अलग फ़ॉर्मेट में बदलें, या box-shadow जनरेटर से गहराई जोड़ें।
मौजूदा ग्रेडिएंट एडिट करना
इम्पोर्ट में ग्रेडिएंट पेस्ट करें: सिर्फ़ linear-gradient(…), पूरा background: या background-image: डिक्लेरेशन, -webkit- प्रीफ़िक्स वाला वर्ज़न या Tailwind bg-[…] क्लास। to top right जैसी दिशाएं, deg, turn या rad में कोण, दो पोज़िशन वाले स्टॉप और बिना पोज़िशन वाले स्टॉप सब पढ़े जाते हैं। पिक्सल पोज़िशन और कलर हिंट प्रतिशत वाले बार पर नहीं दिखाए जा सकते, इसलिए उन्हें अनुमानित किया जाता है और इम्पोर्ट आपको यह बताता है।
अक्सर पूछे जाने वाले सवाल
- CSS में ग्रेडिएंट बैकग्राउंड कैसे बनाएं?
- background (या background-image) को किसी ग्रेडिएंट फ़ंक्शन पर सेट करें, जैसे background: linear-gradient(90deg, #ff7e5f, #feb47b);। यह जनरेटर आपके लिए यह लाइन लिखता है, और चाहें तो उससे पहले एक ठोस फ़ॉलबैक रंग भी।
- लीनियर, रेडियल और कोनिक ग्रेडिएंट में क्या अंतर है?
- लीनियर ग्रेडिएंट सीधी रेखा के साथ रंग बदलता है, रेडियल ग्रेडिएंट केंद्र से गोलों या दीर्घवृत्तों में बाहर फैलता है, और कोनिक ग्रेडिएंट घड़ी की सुई की तरह केंद्र के चारों ओर घूमता है।
- हार्ड एज या धारियां कैसे बनाएं?
- अलग-अलग रंगों वाले दो स्टॉप एक ही पोज़िशन पर रखें। दोहराती धारियों के लिए रिपीटिंग चालू करें और आखिरी स्टॉप को 10% जैसी छोटी वैल्यू पर रखें।
- क्या CSS ग्रेडिएंट पारदर्शी हो सकता है?
- हां। किसी स्टॉप की ओपेसिटी कम करें और जनरेटर उसे rgba() के रूप में लिखेगा। किसी रंग से पारदर्शी तक का ग्रेडिएंट इमेज या ओवरले को पेज में फ़ेड करने का आम तरीका है।
- Tailwind CSS में ग्रेडिएंट कैसे इस्तेमाल करें?
- Tailwind क्लास कॉपी करें, जो bg-[linear-gradient(90deg,#ff7e5f_0%,#feb47b_100%)] जैसी आर्बिट्ररी वैल्यू है, और उसे अपने एलिमेंट में जोड़ें। Tailwind की अपनी from-/via-/to- यूटिलिटी सिर्फ़ सरल लीनियर ग्रेडिएंट संभालती हैं; आर्बिट्ररी वैल्यू हर ग्रेडिएंट सपोर्ट करती है।
- क्या कोनिक ग्रेडिएंट सभी ब्राउज़र में चलते हैं?
- conic-gradient() Chrome, Edge, Firefox और Safari के सभी मौजूदा वर्ज़न में चलता है। अगर आप अब भी बहुत पुराने ब्राउज़र सपोर्ट करते हैं, तो फ़ॉलबैक रंग जोड़ें।
- क्या मैं ग्रेडिएंट को इमेज के रूप में डाउनलोड कर सकता हूं?
- हां। चौड़ाई और ऊंचाई डालें और PNG डाउनलोड करें। इमेज आपके ब्राउज़र में ठीक उसी साइज़ में बनती है, 8192 × 8192 पिक्सल तक।
- क्या कुछ अपलोड होता है?
- नहीं। प्रीव्यू, CSS और PNG एक्सपोर्ट सब आपके ब्राउज़र में ही बनते हैं।