CSS ग्रेडिएंट जनरेटर
ग्रेडिएंट को देखते-देखते आकार दें, फिर ऐसी CSS कॉपी करें जो हर मॉडर्न ब्राउज़र में चले।
इसी डिवाइस पर सुरक्षित
आपके ब्राउज़र में चलता है। कुछ भी अपलोड नहीं होता।
सुरक्षित
प्रीव्यू
कलर स्टॉप
स्टॉप ड्रैग करें, या कोई एक चुनकर ऐरो की इस्तेमाल करें। स्टॉप जोड़ने के लिए बार पर क्लिक करें।
सेटिंग्स
OKLCH और OKLab कुछ ग्रेडिएंट के बीच में आने वाले फीके स्लेटी हिस्से से बचाते हैं। पुराने ब्राउज़र के लिए एक स्टैंडर्ड वर्ज़न भी शामिल है।
CSS कोड
यह कैसे काम करता है
-
टाइप चुनें
लीनियर, रेडियल या कोनिक ग्रेडिएंट चुनें, या किसी प्रीसेट से शुरू करें, और उसका कोण या केंद्र सेट करें।
-
रंग बदलें
कलर स्टॉप को बार पर खिसकाएँ, नए स्टॉप जोड़ने के लिए बार पर क्लिक करें, और हर स्टॉप का रंग और जगह बदलें।
-
CSS कॉपी करें
बना हुआ कोड कॉपी करें और उसे अपनी स्टाइलशीट में बैकग्राउंड के रूप में पेस्ट करें।
अक्सर पूछे जाने वाले सवाल
लीनियर, रेडियल और कोनिक ग्रेडिएंट में क्या फ़र्क है?
लीनियर ग्रेडिएंट आपके चुने कोण पर एक सीधी लाइन में रंग बदलता है। रेडियल ग्रेडिएंट किसी केंद्र बिंदु से गोले या अंडाकार में फैलता है। कोनिक ग्रेडिएंट घड़ी की सुइयों की तरह केंद्र बिंदु के चारों ओर घूमता है, जो कलर व्हील और पाई चार्ट के लिए काम का है।
क्या बना हुआ CSS सभी ब्राउज़र में काम करता है?
लीनियर, रेडियल और कोनिक ग्रेडिएंट सभी मौजूदा ब्राउज़र में काम करते हैं। जब आप OKLCH या OKLab मेल चुनते हैं, तो कोड में पहले एक स्टैंडर्ड लाइन भी होती है, ताकि पुराने ब्राउज़र में भी ग्रेडिएंट दिखे।
मेरा ग्रेडिएंट बीच में स्लेटी क्यों दिखता है?
स्टैंडर्ड sRGB स्पेस में दो बहुत अलग रंगों को मिलाने पर अक्सर बीच में मटमैला स्लेटी रंग आ जाता है। मेल को OKLCH या OKLab पर बदलें: रंग उसी तरह मिलाए जाते हैं जैसे आँख उन्हें देखती है, इसलिए बीच का हिस्सा चटक रहता है।
क्या मैं पारदर्शी रंग इस्तेमाल कर सकता हूँ?
हाँ। किसी स्टॉप के रंग वाले फ़ील्ड में rgb(52 66 217 / 0.4) या #3442d966 जैसा ट्रांसपेरेंसी वाला रंग लिखें। इमेज के ऊपर ओवरले के लिए यह बढ़िया है।
मैं कितने कलर स्टॉप जोड़ सकता हूँ?
जितने चाहिए उतने। हर स्टॉप को माउस, टच या ऐरो की से खिसकाया जा सकता है, और जब तक दो स्टॉप बचे रहें, हटाया भी जा सकता है।