परिणाम केवल जानकारी के उद्देश्य से दिए गए हैं और उनमें त्रुटियाँ हो सकती हैं। महत्वपूर्ण जानकारी की स्वतंत्र रूप से पुष्टि करें। इस टूल का उपयोग आपके अपने जोखिम पर है।
यह टूल क्या करता है
CSS ग्रेडिएंट जेनरेटर दो रंगों से एक background डिक्लेरेशन बनाता है। किसी भी कोण पर एक रेखा के साथ रंग मिलाने के लिए लीनियर चुनें, या केंद्र से बाहर की ओर गोले में फैलाने के लिए रेडियल। कंट्रोल्स बदलते ही प्रीव्यू अपडेट होता है, और आउटपुट बॉक्स में पेस्ट करने के लिए तैयार background: linear-gradient(90deg, #3b82f6, #8b5cf6); जैसी लाइन मिलती है।
लीनियर ग्रेडिएंट में कोण दिशा तय करता है: 0deg नीचे से ऊपर, 90deg बाएँ से दाएँ और 180deg ऊपर से नीचे चलता है। रेडियल ग्रेडिएंट कोण को नज़रअंदाज़ करता है और circle का उपयोग करता है, इसलिए पहला रंग बीच में रहता है। दोनों रूप आज के हर ब्राउज़र में वेंडर प्रीफ़िक्स के बिना सपोर्ट होते हैं, इसलिए जेनरेट की गई लाइन जैसी है वैसी ही काम करती है।
कब इस्तेमाल करें
- किसी हीरो सेक्शन या कॉल-टू-ऐक्शन बटन को हल्का दो-रंगी बैकग्राउंड देना हो।
- ग्रेडिएंट वाली बैकग्राउंड इमेज को CSS से बदलना हो, ताकि पेज एक फ़ाइल कम लोड करे।
- ब्रांड रंगों की जोड़ियों को डिज़ाइन सिस्टम में पक्का करने से पहले साथ-साथ आज़माना हो।
- किसी लोगो या इलस्ट्रेशन के पीछे हल्की रेडियल चमक बनानी हो।
उदाहरण
इनपुट
प्रकार: लीनियर
कोण: 90
रंग: #3b82f6, #8b5cf6आउटपुट
background: linear-gradient(90deg, #3b82f6, #8b5cf6);इस टूल के बारे में सवाल
तीसरा रंग कैसे जोड़ूँ?
उसे फ़ंक्शन के अंदर की सूची में कॉमा लगाकर जोड़ें: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899)। आप हर रंग को एक पोज़िशन भी दे सकते हैं, जैसे #8b5cf6 40%, ताकि तय कर सकें कि रंग कहाँ मिलें।
क्या ग्रेडिएंट पर टेक्स्ट पढ़ने लायक रहेगा?
कलर कंट्रास्ट चेकर से टेक्स्ट के रंग को ग्रेडिएंट के दोनों सिरों के साथ जाँचें। अगर कोई सिरा फ़ेल हो, तो उसे गहरा करें या टेक्स्ट के पीछे एक अर्ध-पारदर्शी ओवरले जोड़ें।
क्या मैं ग्रेडिएंट को बॉर्डर या टेक्स्ट के रंग (fill) के रूप में इस्तेमाल कर सकता हूँ?
हाँ, थोड़ी अतिरिक्त CSS के साथ। टेक्स्ट के लिए ग्रेडिएंट को background के रूप में सेट करें, फिर background-clip: text और color: transparent जोड़ें। बॉर्डर के लिए border-image वही ग्रेडिएंट फ़ंक्शन स्वीकार करता है।
मेरे ग्रेडिएंट में पट्टियाँ (bands) क्यों दिखती हैं?
बैंडिंग तब दिखती है जब दो मिलते-जुलते रंगों को बड़े क्षेत्र में फैलाया जाता है। ज़्यादा अलग रंग चुनें, क्षेत्र छोटा करें, या बीच में एक स्टॉप जोड़ें ताकि हर स्टेप छोटा हो।
क्या यह टूल मुफ़्त है?
हाँ, यह मुफ़्त है। पंजीकरण या ईमेल की ज़रूरत नहीं। परिणाम इसी पेज पर मिलता है।
मेरा परिणाम कहाँ मिलेगा?
इसी पेज पर टूल का उपयोग करें। परिणाम यहीं दिखता है, ईमेल से प्राप्त करने की ज़रूरत नहीं है।