CSS ग्रेडिएंट जनरेटर 🔒 आपके ब्राउज़र में स्थानीय रूप से चलता है — कुछ भी अपलोड नहीं होता।

लीनियर, रेडियल और कॉनिक ग्रेडिएंट डिज़ाइन करें और CSS कॉपी करें।

रंग

प्रीव्यू

   

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

CSS ग्रेडिएंट हर जगह हैं — hero बैकग्राउंड, बटन, कार्ड — पर सिंटैक्स हाथ से लिखना और कोण का अंदाज़ा लगाना झंझट है। यह विज़ुअल बिल्डर आपको कलर स्टॉप जोड़ने व खींचने, कोण सेट करने, और लीनियर, रेडियल व कॉनिक ग्रेडिएंट के बीच स्विच करने देता है, जबकि नतीजा लाइव प्रीव्यू को भरते देखें।

सही दिखने पर, तैयार background CSS सीधे अपनी स्टाइलशीट में कॉपी करें। यह पूरी तरह क्लाइंट-साइड है, इसलिए जितना चाहें प्रयोग करें — कुछ भी कहीं नहीं भेजा जाता।

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

क्या यह जनरेटर -webkit-linear-gradient जैसे वेंडर प्रीफ़िक्स जोड़ता है?

नहीं। वेंडर-प्रीफ़िक्स वाला ग्रेडिएंट सिंटैक्स केवल बहुत पुराने ब्राउज़र (2012 से पहले के) के लिए ज़रूरी था, इसलिए यह टूल स्टैंडर्ड linear-gradient(), radial-gradient() और conic-gradient() ही देता है, जिसे हर आधुनिक ब्राउज़र समझता है।

क्या मेरा ग्रेडिएंट डिज़ाइन कहीं अपलोड या सेव होता है?

नहीं। कलर स्टॉप्स, एंगल और प्रीव्यू — सब कुछ आपके ब्राउज़र में ही लाइव जनरेट होता है; कुछ भी सर्वर पर नहीं भेजा जाता।

लीनियर, रेडियल और कॉनिक ग्रेडिएंट में क्या अंतर है?

लीनियर ग्रेडिएंट चुने गए एंगल पर एक सीधी रेखा के साथ रंगों को मिलाता है, रेडियल एक केंद्र बिंदु से गोलाकार रूप से बाहर की ओर फैलता है, और कॉनिक रंग-चक्र की तरह केंद्र बिंदु के चारों ओर रंगों को घुमाता है।

मैं कितने कलर स्टॉप जोड़ सकता हूँ?

जितने चाहें उतने — नया स्टॉप जोड़ने के लिए 'Add' पर क्लिक करें, उसके पोज़िशन स्लाइडर को खींचें, और अंतिम दो को छोड़कर किसी भी स्टॉप को हटा सकते हैं।

क्या जनरेट किया गया CSS सीधे मेरी स्टाइलशीट में पेस्ट किया जा सकता है?

हाँ। 'Copy' पर क्लिक करें और `background: ...;` लाइन को सीधे किसी भी CSS रूल या इनलाइन स्टाइल में पेस्ट कर दें — किसी बदलाव की ज़रूरत नहीं।