CSS ग्रेडिएंट जनरेटर
OKLCH या OKLab ब्लेंडिंग और sRGB फ़ॉलबैक के साथ लीनियर, रेडियल और कोनिक CSS ग्रेडिएंट बनाएं, फिर CSS, Tailwind क्लास या SVG कॉपी करें या PNG डाउनलोड करें।
कलर स्टॉप
स्टॉप जोड़ने के लिए बार पर क्लिक करें, और किसी स्टॉप को खिसकाने के लिए उसे ड्रैग करें। स्टॉप चुना होने पर ऐरो कुंजियां उसे खिसकाती हैं और Delete उसे हटा देता है।
रंग किसमें मिलाएं
वही स्टॉप, तीन तरीकों से मिलाए गए। क्लासिक sRGB दूर-दूर के रंगों के बीच धूसर या मटमैला हो सकता है; OKLab चमक को एकसमान रखता है और OKLCH रंग को गाढ़ा बनाए रखता है। जो ब्राउज़र OKLab या OKLCH नहीं समझते, उन्हें sRGB फ़ॉलबैक मिलता है जो बिल्कुल वैसा ही दिखता है।
ऊपर रखा टेक्स्ट
- सफ़ेद टेक्स्ट
- 2.1:1
- बहुत कम
- काला टेक्स्ट
- 4.2:1
- AA केवल बड़े टेक्स्ट के लिए
ग्रेडिएंट पर कहीं भी सबसे कम कंट्रास्ट। WCAG AA के लिए सामान्य टेक्स्ट पर 4.5:1 और बड़े टेक्स्ट पर 3:1 चाहिए।
कोड
background: linear-gradient(90deg, #0077a3 0%, #1178a2 1.56%, #1b79a1 3.13%, #2a7b9f 6.25%, #367d9c 9.38%, #3f7f9a 12.5%, #608591 25%, #959179 50%, #ad956b 62.5%, #c59959 75%, #dd9c41 87.5%, #e99d2f 93.75%, #ef9d22 96.88%, #f29e19 98.44%, #f59e0b 100%);
background: linear-gradient(in oklab 90deg, #0077a3 0%, #f59e0b 100%);आंखों से देखकर CSS ग्रेडिएंट बनाएं और ऐसा कोड कॉपी करें जो हर जगह चले। लीनियर, रेडियल या कोनिक चुनें, कलर स्टॉप ड्रैग करें, और तय करें कि रंग कैसे मिलें: आधुनिक ब्राउज़र OKLab या OKLCH में रंग मिला सकते हैं, जिससे क्लासिक sRGB ग्रेडिएंट के बीच वाला धूसर, बेजान हिस्सा नहीं बनता, और पुराने ब्राउज़रों के लिए कोड में मेल खाता sRGB फ़ॉलबैक भी होता है। आप यह भी देख सकते हैं कि ऊपर रखा सफ़ेद या काला टेक्स्ट पढ़ने लायक रहता है या नहीं, और Tailwind क्लास, SVG या किसी भी साइज़ का PNG एक्सपोर्ट कर सकते हैं।