CSS ग्रेडिएंट जेनरेटर
लीनियर या रेडियल CSS ग्रेडिएंट को विज़ुअली बनाएं और अपने ब्राउज़र में ही तैयार CSS कॉपी करें।
🔒 आपके ब्राउज़र में लोकली प्रोसेस किया गया
Loading…
इस्तेमाल कैसे करें
- ग्रेडिएंट प्रकार के लिए लीनियर या रेडियल चुनें। लीनियर ग्रेडिएंट के लिए, कोण (डिग्री में) सेट करने के लिए स्लाइडर खींचें या एक वैल्यू टाइप करें।
- हर कलर स्टॉप में एक कलर स्वैच और एक स्थिति (0-100%) होती है। रंग चुनने के लिए स्वैच पर क्लिक करें, या उस स्टॉप को ग्रेडिएंट में आगे-पीछे खिसकाने के लिए स्थिति टाइप करें।
- 5 तक कलर स्टॉप जोड़ने के लिए "स्टॉप जोड़ें" का उपयोग करें, या किसी स्टॉप को हटाने के लिए उसके बगल में "हटाएं" पर क्लिक करें (कम से कम 2 स्टॉप ज़रूरी हैं)।
- CSS आउटपुट के ऊपर दिया गया प्रीव्यू बॉक्स किसी भी कंट्रोल को बदलते ही लाइव अपडेट हो जाता है — कोई बटन दबाने की ज़रूरत नहीं।
- जनरेट किए गए CSS डिक्लेरेशन को कॉपी करने के लिए Copy पर क्लिक करें, जो आपकी स्टाइलशीट में पेस्ट करने के लिए तैयार है।
विशेषताएं
- लीनियर (एडजस्टेबल कोण के साथ) और रेडियल दोनों तरह के ग्रेडिएंट को सपोर्ट करता है
- 5 तक कलर स्टॉप, हर एक का अपना रंग और स्थिति
- लाइव प्रीव्यू बॉक्स जो किसी भी कंट्रोल को एडिट करते ही तुरंत अपडेट होता है
- पेस्ट करने के लिए तैयार CSS डिक्लेरेशन की एक-क्लिक कॉपी
- 100% क्लाइंट-साइड — आपका ग्रेडिएंट कभी भी आपके ब्राउज़र से बाहर नहीं जाता
अक्सर पूछे जाने वाले सवाल
क्या यह टूल मेरा ग्रेडिएंट कहीं भेजता है?
नहीं। ग्रेडिएंट पूरी तरह से लोकल JavaScript और CSS से बनाया और प्रीव्यू किया जाता है — कुछ भी कभी अपलोड या सर्वर पर नहीं भेजा जाता।
मैं कितने कलर स्टॉप जोड़ सकता हूं?
5 तक। किसी ग्रेडिएंट का मतलब बनाने के लिए कम से कम 2 स्टॉप चाहिए, इसलिए 2 स्टॉप रह जाने पर Remove बटन डिसेबल हो जाता है।
क्या रेडियल ग्रेडिएंट पर कोण कंट्रोल का कोई असर होता है?
नहीं। इस टूल में रेडियल ग्रेडिएंट हमेशा सेंटर से एक सर्कल के रूप में बाहर की ओर फैलते हैं, इसलिए कोण सेटिंग केवल लीनियर ग्रेडिएंट पर लागू होती है।
अगर दो स्टॉप की स्थिति एक जैसी हो तो क्या होगा?
यह मान्य है और इसे जानबूझकर एक स्मूद ब्लेंड की बजाय एक तेज कलर एज बनाने के लिए इस्तेमाल किया जा सकता है — दोनों स्टॉप जनरेट हुए CSS में बने रहते हैं।
क्या मैं आउटपुट को सीधे अपनी CSS फ़ाइल में पेस्ट कर सकता हूं?
हां। आउटपुट बॉक्स एक पूरा `background: ...;` डिक्लेरेशन दिखाता है जिसे आप ज्यों का त्यों किसी स्टाइलशीट या इनलाइन स्टाइल में पेस्ट कर सकते हैं।