CSS ग्रेडिएंट जनरेटर
जितने चाहें कलर स्टॉप के साथ लीनियर, रेडियल और कोनिक CSS ग्रेडिएंट बनाएँ। लाइव प्रीव्यू, प्रीसेट और रैंडम आइडिया, CSS, SCSS, SVG या PNG में एक्सपोर्ट।
CSS ग्रेडिएंट जनरेटर लोड हो रहा है…
आपकी फ़ाइलें कभी आपके डिवाइस से बाहर नहीं जातीं
CSS ग्रेडिएंट जनरेटर का इस्तेमाल कैसे करें
- 1
इस पेज पर CSS ग्रेडिएंट जनरेटर खोलें। यह सीधे आपके ब्राउज़र में लोड होता है।
- 2
अपनी फ़ाइल, टेक्स्ट या वैल्यू जोड़ें और सेटिंग बदलें।
- 3
नतीजा कॉपी या डाउनलोड करें। कुछ भी अपलोड या स्टोर नहीं होता।
इस टूल के बारे में
यह CSS ग्रेडिएंट जनरेटर आपको ग्रेडिएंट बैकग्राउंड विज़ुअली डिज़ाइन करने और कोड कॉपी करने देता है। ग्रेडिएंट का प्रकार चुनें, रंग जोड़ें, स्टॉप को खींचकर जगह पर रखें और कोण सेट करें; लाइव प्रीव्यू और CSS साथ साथ अपडेट होते हैं।
जब सही लगे, CSS कॉपी करें या उसे SCSS, SVG या PNG इमेज के रूप में एक्सपोर्ट करें।
ग्रेडिएंट कैसे बनाएँ
- लीनियर, रेडियल या कोनिक चुनें।
- रंग सेट करें और ज़रूरत के हिसाब से कलर स्टॉप जोड़ें।
- स्टॉप खींचें या प्रतिशत में सटीक जगह लिखें।
- लीनियर और कोनिक ग्रेडिएंट के लिए कोण सेट करें (90° बाएँ से दाएँ, 180° ऊपर से नीचे)।
- बना हुआ कोड कॉपी या एक्सपोर्ट करें।
आइडिया नहीं सूझ रहे? किसी प्रीसेट से शुरू करें या तुरंत नए कॉम्बिनेशन के लिए Random पर क्लिक करें, और पसंद आए ग्रेडिएंट बाद के लिए सेव करें।
ग्रेडिएंट के प्रकार
- लीनियर: रंग किसी कोण पर सीधी रेखा में घुलते हैं।
linear-gradient(90deg, #6366f1, #ec4899) - रेडियल: रंग बीच के एक बिंदु से गोल या अंडाकार रूप में फैलते हैं।
radial-gradient(circle, #fde68a, #f97316) - कोनिक: रंग कलर व्हील या पाई चार्ट की तरह केंद्र के चारों ओर घूमते हैं।
conic-gradient(from 0deg, red, yellow, lime, aqua, blue, magenta, red)
एक्सपोर्ट फ़ॉर्मेट
- CSS: पेस्ट करने के लिए तैयार background प्रॉपर्टी।
- SCSS: आपकी स्टाइलशीट के लिए वेरिएबल के रूप में ग्रेडिएंट।
- SVG: डिज़ाइन टूल और इलस्ट्रेशन के लिए वेक्टर फ़ाइल।
- PNG इमेज: उन जगहों के लिए जहाँ CSS नहीं चलता, जैसे स्लाइड और सोशल पोस्ट।
अच्छे ग्रेडिएंट के सुझाव
- नरम मिश्रण के लिए पास पास के रंग इस्तेमाल करें। लाल और हरे जैसे विपरीत रंग बीच में मटमैले ग्रे हो सकते हैं; इससे बचने के लिए बीच में एक स्टॉप जोड़ें।
- टेक्स्ट पढ़ने लायक रखें: टेक्स्ट के पीछे सबसे हल्के और सबसे गहरे हिस्से पर कंट्रास्ट जाँचें।
- हार्ड स्टॉप: तेज़ किनारे के लिए दो स्टॉप एक ही जगह पर रखें, धारियों के लिए काम का।
- सादगी प्रोफ़ेशनल लगती है: एक ही रंग के दो करीबी शेड इंद्रधनुष से ज़्यादा शांत दिखते हैं।
सभी आधुनिक ब्राउज़र बिना प्रीफ़िक्स के लीनियर, रेडियल और कोनिक ग्रेडिएंट सपोर्ट करते हैं। पूरी कलर स्कीम बना रहे हैं? कलर पैलेट जनरेटर इस्तेमाल करें, और बॉक्स शैडो जनरेटर से गहराई जोड़ें।
अक्सर पूछे जाने वाले सवाल
CSS ग्रेडिएंट कैसे बनाएँ?
एक प्रकार चुनें, कम से कम दो रंग चुनें, स्टॉप और कोण बदलें, और बना हुआ CSS अपनी स्टाइलशीट में बैकग्राउंड के रूप में कॉपी करें।
लीनियर, रेडियल और कोनिक ग्रेडिएंट में क्या फ़र्क है?
लीनियर सीधी रेखा में घुलता है, रेडियल बीच के बिंदु से फैलता है, और कोनिक कलर व्हील की तरह केंद्र के चारों ओर रंग घुमाता है।
तेज़ किनारे वाला ग्रेडिएंट कैसे बनाएँ?
दो कलर स्टॉप एक ही जगह पर रखें। तब उस बिंदु पर रंग घुलने की बजाय तुरंत बदल जाते हैं।
क्या ग्रेडिएंट को इमेज के रूप में डाउनलोड कर सकते हैं?
हाँ। इसे PNG इमेज के रूप में एक्सपोर्ट करें, या वेक्टर फ़ाइल चाहिए तो SVG के रूप में।
क्या CSS ग्रेडिएंट सभी ब्राउज़र में चलते हैं?
हाँ। लीनियर, रेडियल और कोनिक ग्रेडिएंट Chrome, Edge, Firefox और Safari के सभी मौजूदा वर्ज़न में बिना प्रीफ़िक्स के चलते हैं।
क्या अपने ग्रेडिएंट सेव कर सकते हैं?
हाँ। अपने पसंदीदा ग्रेडिएंट सेव करें और बाद में उसी ब्राउज़र में फिर खोलें।