CSS ग्रेडिएंट जनरेटर (लेयर, दोहराव)
लीनियर, रेडियल और कोनिक ग्रेडिएंट बनाएं, कई लेयर एक के ऊपर एक रखें, कलर स्टॉप खींचें, कोण, केंद्र, पारदर्शिता और दोहराव सेट करें और CSS कॉपी करें
टूल लोड हो रहा है…
अधिकतम चार लीनियर, रेडियल या कोनिक ग्रेडिएंट को एक के ऊपर एक रखकर बैकग्राउंड बनाता है और background-image का CSS देता है। पारभासी लेयर से रोशनी या मेश जैसे प्रभाव बनते हैं, दोहराव से धारियां और छल्ले बनते हैं, और चित्र को PNG के रूप में सेव किया जा सकता है।
इस्तेमाल का तरीका
- "प्रीसेट" की किसी टाइल से या डिफ़ॉल्ट से शुरू करें। "लेयर" में वह लेयर चुनें जिसे बदलना है और "प्रकार", "कोण" और "दोहराव" सेट करें।
- रेडियल और कोनिक लेयर के लिए प्रीव्यू पर क्लिक करें या खींचकर केंद्र खिसकाएं और "आकार" तथा "साइज़" चुनें।
- स्टॉप जोड़ने के लिए "कलर स्टॉप" बार पर क्लिक करें और खिसकाने के लिए गोला खींचें। चुने हुए स्टॉप का रंग, "अपारदर्शिता", "स्थिति" और "मिडपॉइंट" नीचे बदलें।
- ऊपर एक पारभासी लेयर रखने के लिए "लेयर जोड़ें" दबाएं; तुलना के लिए लेयर का क्रम बदलें या "छिपाएं" दबाएं।
- CSS के पास "कॉपी करें" दबाएं, या "PNG साइज़" चुनकर "PNG के रूप में सेव करें" दबाएं।
यह कैसे काम करता है
- आउटपुट एक background-image घोषणा है; लेयर CSS के क्रम में ऊपर से नीचे बनती हैं। पारभासी रंग rgb(r g b / a) के रूप में लिखे जाते हैं।
- मिडपॉइंट CSS का ट्रांज़िशन हिंट है, जो उस जगह को खिसकाता है जहां दो स्टॉप आधे-आधे मिलते हैं। दोहराव पहले से आखिरी स्टॉप तक के हिस्से को repeating-linear-gradient की तरह बार-बार बिछाता है।
- कोण और रेडियल साइज़ के कीवर्ड CSS Images 3 के अनुसार हैं, और रंग ब्राउज़र के डिफ़ॉल्ट की तरह sRGB में मिलते हैं। PNG उन्हीं नियमों से ब्राउज़र में बनाया जाता है।
- आपकी लेयर और स्टॉप इसी ब्राउज़र में सेव रहते हैं।
अक्सर पूछे जाने वाले सवाल
- CSS में कई ग्रेडिएंट एक के ऊपर एक कैसे रखें?
- उन्हें background-image में कॉमा से अलग करके लिखें। पहला सबसे ऊपर बनता है, इसलिए ऊपर की लेयर में कुछ पारदर्शिता चाहिए। CSS बॉक्स इसी रूप में लिखता है।
- धारीदार बैकग्राउंड कैसे बनाएं?
- "दोहराव" चालू करें और एक ही रंग के दो स्टॉप एक ही स्थिति पर रखें, जिससे किनारा साफ़ बनता है। "धारियां" प्रीसेट से शुरू करना आसान है।
- मेरे ग्रेडिएंट का बीच का हिस्सा मैला दिखता है। क्या करें?
- मिलने की जगह खिसकाने के लिए "मिडपॉइंट" चालू करें, या बीच में अपनी पसंद के रंग का एक स्टॉप जोड़ें। पूरक रंग आपस में मिलकर भूरे हो जाते हैं।
- क्या प्रीव्यू और PNG अलग हो सकते हैं?
- प्रीव्यू को ब्राउज़र CSS से बनाता है; PNG उन्हीं नियमों से गिना जाता है। राउंडिंग के अलावा दोनों एक जैसे होते हैं।