CSS Gradient Generator

इस टूल के बारे में

CSS ग्रेडिएंट जेनरेटर मल्टी-कलर ग्रेडिएंट बनाता है जिसे आप सीधे CSS में पेस्ट कर सकते हैं। यह लीनियर (दिशात्मक) और रेडियल (गोलाकार) ग्रेडिएंट का समर्थन करता है।

कलर स्टॉप ग्रेडिएंट अक्ष के साथ प्रत्येक रंग की शुरुआत और अंत परिभाषित करते हैं। एंगल स्लाइडर लीनियर ग्रेडिएंट को 0° से 360° तक घुमाता है।

कैसे उपयोग करें

1. ग्रेडिएंट टाइप चुनें: लीनियर या रेडियल।
2. लीनियर ग्रेडिएंट के लिए, दिशा सेट करने के लिए एंगल स्लाइडर खींचें।
3. रंग बदलने के लिए स्वैच पर क्लिक करें और स्थिति समायोजित करने के लिए स्लाइडर खींचें।
4. अधिक स्टॉप जोड़ने के लिए + जोड़ें पर क्लिक करें। हटाने के लिए ✕ पर क्लिक करें।
5. CSS background डिक्लेरेशन कॉपी करने के लिए कॉपी पर क्लिक करें।

उपयोग के मामले

वेब डिजाइनर छवियों की बजाय CSS ग्रेडिएंट से हीरो सेक्शन बैकग्राउंड बनाते हैं। ब्रांड टीमें कॉर्पोरेट रंग दिशानिर्देशों से मेल खाते ग्रेडिएंट पैलेट बनाती हैं। डेवलपर्स कार्ड, बटन और ओवरले प्रोटोटाइप करते हैं।

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

• लीनियर और रेडियल ग्रेडिएंट में क्या अंतर है? — लीनियर ग्रेडिएंट एक दिशा में रंग बदलता है। रेडियल ग्रेडिएंट केंद्र बिंदु से बाहर की ओर रंग विकिरण करता है।
• क्या दो से अधिक रंग उपयोग किए जा सकते हैं? — हाँ। + जोड़ें पर क्लिक करके जितने चाहें उतने स्टॉप जोड़ें।
• क्या जेनरेट किया गया CSS सभी ब्राउज़र में काम करता है? — हाँ। linear-gradient() और radial-gradient() फ़ंक्शन बिना वेंडर प्रीफिक्स के सभी आधुनिक ब्राउज़र में पूरी तरह समर्थित हैं।