फ्री CSS Gradient Generator
यह फ्री CSS ग्रेडिएंट जनरेटर दो या तीन रंगों और एक कोण से लीनियर या रेडियल ग्रेडिएंट बनाता है, पूर्वावलोकन दिखाता है और CSS कोड देता है जिसमें पुराने ब्राउज़र के लिए सॉलिड कलर फॉलबैक भी शामिल है। यह डिज़ाइनर और डेवलपर के लिए परफेक्ट है जो हीरो सेक्शन, बटन या कार्ड के लिए बैकग्राउंड चाहते हैं बिना सिंटैक्स हाथ से लिखे।
CSS Gradient Generator
Generators and Converters
इस टूल के बारे में
CSS ग्रेडिएंट एक बैकग्राउंड इमेज है जो ब्राउज़र बनाता है, इसलिए कोई डाउनलोड नहीं होता और यह किसी भी साइज़ पर शार्प रहता है। सिंटैक्स छोटा है लेकिन भूलना आसान है: linear-gradient एक कोण और रंगों की लिस्ट लेता है, और radial-gradient रंगों को एक केंद्र बिंदु से बाहर की ओर फैलाता है।
स्टाइल चुनें, लीनियर ग्रेडिएंट के लिए कोण सेट करें, और दो रंग चुनें। तीसरे रंग के लिए ऑन करें तीन-स्टॉप ब्लेंड के लिए; स्टॉप समान रूप से फैले हुए हैं। पेज उसी वैल्यूज़ से एक पूर्वावलोकन खींचता है और एक बैकग्राउंड नियम प्रिंट करता है जिसमें पहले एक सादा रंग है, इसलिए ब्राउज़र जो ग्रेडिएंट नहीं बना सकते वे अभी भी कुछ समझदारी भरा दिखाते हैं। कोण CSS नियम का पालन करते हैं: 0 डिग्री ऊपर की ओर, 90 दाईं ओर, 180 नीचे की ओर।
कंट्रास्ट देखें जब टेक्स्ट ग्रेडिएंट पर बैठता है: अपने टेक्स्ट कलर के साथ सबसे हल्के और सबसे गहरे हिस्सों को कलर पिकर से चेक करें। बहुत अलग ह्यूज़ वाले ग्रेडिएंट बीच में मैली दिख सकते हैं, इसलिए एक तीसरा रंग आजमाएं जो उनके बीच बैठता है। आप जो कुछ भी चुनते हैं वह स्टोर नहीं होता।
अक्सर पूछे जाने वाले सवाल
लीनियर ग्रेडिएंट में कोण का मतलब क्या है?
यह रंग परिवर्तन की दिशा है। शून्य डिग्री शीर्ष की ओर, 90 डिग्री दाईं ओर, 180 डिग्री नीचे की ओर और 270 डिग्री बाईं ओर इशारा करता है। एक विकर्ण जैसे 135 डिग्री ऊपर बाईं ओर से नीचे दाईं ओर चलता है।
CSS में पहले एक सॉलिड कलर क्यों शामिल है?
यह एक फॉलबैक है। एक ब्राउज़र जो ग्रेडिएंट नहीं बना सकता वह ग्रेडिएंट लाइन को अनदेखा करता है और ऊपर के सादे रंग का उपयोग करता है, इसलिए बैकग्राउंड कभी खाली नहीं होता। सभी वर्तमान ब्राउज़र ग्रेडिएंट सपोर्ट करते हैं, इसलिए यह केवल बहुत पुराने को कवर करता है।
लीनियर और रेडियल में क्या अंतर है?
एक लीनियर ग्रेडिएंट आपके द्वारा चुने गए कोण पर एक सीधी लाइन के साथ रंग बदलता है। एक रेडियल ग्रेडिएंट केंद्र से शुरू होता है और एक सर्कल या दीर्घवृत्त में बाहर की ओर रंग बदलता है, जो स्पॉटलाइट, बटन और सॉफ्ट ग्लो के लिए उपयुक्त है।
क्या मैं तीन से अधिक रंग का उपयोग कर सकता हूं?
यह टूल दो या तीन स्टॉप बनाता है, जो अधिकांश डिज़ाइन को कवर करता है। अधिक के लिए, CSS कॉपी करें और अतिरिक्त कलर स्टॉप हाथ से जोड़ें, कोमा से अलग, वैकल्पिक रूप से एक पोजीशन के साथ जैसे #ff0000 40%।