इस्तेमाल कैसे करें
- दो या तीन रंग चुनें।
- ग्रेडिएंट का प्रकार और कोण चुनें।
- लाइव प्रीव्यू देखें।
- CSS कॉपी करने के लिए "कॉपी करें" दबाएँ और अपनी stylesheet में पेस्ट करें।
यह कैसे काम करता है
कोड standard CSS functions linear-gradient(), radial-gradient() और conic-gradient() इस्तेमाल करता है, जो सभी नए ब्राउज़र में बिना prefix के चलते हैं।
टिप्स और आम इस्तेमाल
बैकग्राउंड, बटन और बैनर
कॉपी किया कोड किसी सेक्शन, बटन या बैनर की background या background-image प्रॉपर्टी में पेस्ट करें। पास के दो रंग हल्का असर देते हैं और दूर के दो रंग गहरा।
टेक्स्ट पढ़ने लायक़ रखें
ग्रेडिएंट पर टेक्स्ट एक सिरे पर आसानी से पढ़ा जाता है और दूसरे पर मुश्किल से। सबसे हल्के और सबसे गहरे हिस्सों को कलर कंट्रास्ट चेकर से अपने टेक्स्ट रंग के साथ जाँचें।
फ़ॉलबैक रंग जोड़ें
ग्रेडिएंट से पहले एक सादी background-color लाइन रखें, ताकि ग्रेडिएंट लोड न हो तब भी सेक्शन का रंग ठीक रहे। Conic ग्रेडिएंट सरल पाई-चार्ट आकारों के भी काम आते हैं।
अक्सर पूछे जाने वाले सवाल
कोड कैसे इस्तेमाल करें?
इसे किसी CSS rule के अंदर पेस्ट करें, जैसे: .hero { background: linear-gradient(…); }
क्या टेक्स्ट पर ग्रेडिएंट लगा सकते हैं?
हाँ: ग्रेडिएंट बैकग्राउंड के साथ element पर background-clip: text और color: transparent लगाएँ।
कुछ ग्रेडिएंट बीच में ग्रे क्यों दिखते हैं?
उल्टे रंग (जैसे नीला और पीला) मिलाने पर बीच में ग्रे आता है। बीच में तीसरा रंग जोड़ें, या कलर-व्हील पर पास-पास के रंग चुनें।