CSS ग्रेडिएंट जनरेटर — लाइव प्रीव्यू और CSS कॉपी करें

CSS ग्रेडिएंट जनरेटर के बारे में

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

यह कैसे काम करता है

आप दो रंग और एक ग्रेडिएंट टाइप चुनते हैं:

लीनियर — रंग आपके सेट किए हुए कोण (0–360°) पर एक सीधी रेखा के साथ मिलते हैं, इसलिए आप ग्रेडिएंट को ऊपर-से-नीचे, बाएँ-से-दाएँ, डायगोनल, या किसी भी दिशा में बना सकते हैं।
रेडियल — रंग केंद्र से बाहर की ओर एक सर्कल में मिलते हैं।

प्रीव्यू पैनल तुरंत परिणाम दिखाता है, और आउटपुट बॉक्स आपको सीधे अपने स्टाइल में कॉपी करने के लिए background: linear-gradient(45deg, #…, #…); जैसा उपयोग के लिए तैयार CSS देता है।

मान्यताएँ और व्यवहार

एक दो-रंग वाला ग्रेडिएंट बनाता है (एक शुरुआती और एक अंतिम रंग)।
लीनियर ग्रेडिएंट डिग्री में कोण उपयोग करते हैं; CSS परंपरा के अनुसार 0° ऊपर की ओर इशारा करता है, 90° दाईं ओर।
रेडियल ग्रेडिएंट केंद्र से बाहर की ओर एक सर्कल के रूप में मिलते हैं; कोण नियंत्रण छिपा होता है क्योंकि यह लागू नहीं होता।
जनरेट किया गया CSS मानक है और बिना वेंडर प्रीफ़िक्स के सभी आधुनिक ब्राउज़र में काम करता है।

सीमाएँ

केवल दो कलर स्टॉप। यह तीन-या-अधिक-स्टॉप ग्रेडिएंट, कस्टम स्टॉप पोज़िशन, या कई लेयर्ड ग्रेडिएंट का समर्थन नहीं करता — उनके लिए आपको CSS हाथ से एडिट करना होगा।
यह लीनियर और रेडियल प्रदान करता है, कॉनिक ग्रेडिएंट या रिपीटिंग ग्रेडिएंट नहीं।
रेडियल ग्रेडिएंट डिफ़ॉल्ट केंद्रित सर्कल उपयोग करते हैं; यह शेप, साइज़ या पोज़िशन कीवर्ड एक्सपोज़ नहीं करता।
यह background डिक्लेरेशन जनरेट करता है; यह बहुत पुराने ब्राउज़र के लिए फ़ॉलबैक नहीं संभालता (आजकल शायद ही कभी ज़रूरी)।

गोपनीयता

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

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

क्या यह ग्रेडिएंट जनरेटर मुफ़्त है?

हाँ — मुफ़्त, बिना साइन-अप, बिना किसी सीमा के, आपके ब्राउज़र में चलता है।

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

हाँ। लीनियर (एडजस्टेबल कोण के साथ) या रेडियल (केंद्र से बाहर की ओर मिलते हुए) चुनें, हर एक के लाइव प्रीव्यू के साथ।

मैं आउटपुट का उपयोग कैसे करूँ?

जनरेट किया गया CSS कॉपी करें — जैसे 'background: linear-gradient(45deg, #…, #…);' — और इसे अपनी स्टाइलशीट या इनलाइन स्टाइल में पेस्ट करें।

क्या मैं दो से ज़्यादा रंग जोड़ सकता हूँ?

नहीं। यह दो-रंग वाला ग्रेडिएंट बनाता है। तीन या अधिक स्टॉप या कस्टम स्टॉप पोज़िशन के लिए, कॉपी करने के बाद CSS को हाथ से एडिट करें।

क्या यह कॉनिक ग्रेडिएंट बनाता है?

नहीं — यह लीनियर और रेडियल का समर्थन करता है। कॉनिक और रिपीटिंग ग्रेडिएंट शामिल नहीं हैं।

क्या CSS सभी ब्राउज़र में काम करेगा?

हाँ। आउटपुट मानक CSS है जो बिना वेंडर प्रीफ़िक्स के सभी आधुनिक ब्राउज़र में काम करता है।

क्या कुछ अपलोड होता है?

नहीं। सब कुछ आपके ब्राउज़र में स्थानीय रूप से चलता है; कुछ भी भेजा या संग्रहीत नहीं होता।

✨ What do you want to try next?