CSS ग्रेडिएंट जेनरेटर
ड्रैग होने वाले कलर स्टॉप, एंगल, रिपीटिंग मोड और OKLCH इंटरपोलेशन के साथ linear, radial और conic CSS ग्रेडिएंट बनाएं। लाइव प्रीव्यू, कोड कॉपी करें।
प्रीसेट
ग्रेडिएंट सेटिंग्स
कलर स्टॉप
स्टॉप जोड़ने के लिए पट्टी पर क्लिक करें, खिसकाने के लिए हैंडल खी ंचें। रंग hex, rgb(), hsl() या oklch() में दे सकते हैं।
प्रीव्यू
background: linear-gradient(90deg, #00c9ff 0%, #92fe9d 100%);
संबंधित टूल्स
सभी देखेंCSS ग्रेडिएंट जेनरेटर क्या है?
यह एक पूरा CSS ग्रेडिएंट एडिटर है जो linear-gradient, radial-gradient और conic-gradient, उनके रिपीटिंग रूप और आधुनिक कलर इंटरपोलेशन (in oklab / in oklch) को सपोर्ट करता है। कलर स्टॉप को बार पर ड्रैग किया या सटीक टाइप किया जा सकता है, और रंग hex, rgb(), hsl() या oklch() में दिए जा सकते हैं।
CSS ग्रेडिएंट जेनरेटर का उपयोग कैसे करें
- कोई प्रीसेट या Type चुनें: Linear, Radial या Conic।
- Angle (linear), Start angle (conic) या Shape, Size और center position (radial/conic) सेट करें।
- Color stops एडिट करें: स्टॉप जोड़ने के लिए बार पर क्लिक करें, हैंडल ड्रैग करके हिलाएं, या हर स्टॉप के लिए रंग और पोज़िशन टाइप करें।
- चाहें तो Repeating gradient टिक करें और Interpolation color space (OKLab या OKLCH) चुनें।
- CSS कोड कॉपी करें।
उदाहरण
Linear, angle 45°, stops #00c9ff at 0% and oklch(70% 0.2 150) at 80%, interpolation OKLCH
background: linear-gradient(45deg, #00c9ff 0%, oklch(70% 0.2 150) 80%); background: linear-gradient(in oklch 45deg, #00c9ff 0%, oklch(70% 0.2 150) 80%);
CSS ग्रेडिएंट जेनरेटर का उपयोग कब करें
इसे बैकग्राउंड, बटन, हीरो सेक्शन और ग्रेडिएंट से बनी स्ट्राइप या कलर व्हील के लिए इस्तेमाल करें। मुलायम मल्टी-पॉइंट "मेश" बैकग्राउंड के लिए Mesh Gradient Generator और इमेज पर फ़ोटो जैसे इफ़ेक्ट के लिए CSS फ़िल्टर चुनें।
CSS ग्रेडिएंट जेनरेटर कैसे काम करता है
स्टॉप को पोज़िशन के अनुसार क्रमबद्ध करके color position% के रूप में लिखा जाता है। Linear ग्रेडिएंट डिग्री में एंगल, radial shape [size] at x% y% और conic from angle at x% y% इस्तेमाल करते हैं। बार पर क्लिक करने से ऐसा स्टॉप बनता है जिसका रंग पड़ोसी स्टॉप से इंटरपोलेट होता है। इंटरपोलेशन स्पेस चुनने पर टूल दो डिक्लेरेशन देता है: पहले सादा sRGB फ़ॉलबैक, फिर वही ग्रेडिएंट in oklch (या in oklab) के साथ, ताकि पुराने ब्राउज़र में ग्रेडिएंट चलता रहे और आधुनिक ब्राउज़र ज़्यादा स्मूद परसेप्चुअल ब्लेंड इस्तेमाल करें।
सामान्य उपयोग मामले
- हीरो और सेक्शन बैकग्राउंड
- ग्रेडिएंट बटन और बैज
- conic ग्रेडिएंट से कलर व्हील और पाई जैसे विज़ुअल
- रिपीटिंग ग्रेडिएंट से धारीदार बैकग्राउंड
- OKLCH से स्मूद ग्रेडिएंट जिनमें sRGB ब्लेंड का भूरा बीच का हिस्सा नहीं आता
अक्सर पूछे जाने वाले प्रश्न
OKLCH इंटरपोलेशन में दो background लाइनें क्यों हैं?
जो ब्राउज़र in oklch नहीं समझते वे वह डिक्लेरेशन पूरी तरह छोड़ देते हैं। पहली लाइन सामान्य sRGB ग्रेडिएंट है जिसे वे इस्तेमाल कर सकते हैं; सपोर्ट करने वाले ब्राउज़र दूसरी लाइन लागू करते हैं।
OKLCH इंटरपोलेशन से क्या बदलता है?
रंग परसेप्चुअली एकसमान स्पेस में मिलाए जाते हैं, इसलिए गहरे रंगों के बीच ग्रेडिएंट फीके भूरे या गंदले बीच से गुज़रने के बजाय चटक बने रहते हैं।
क्या मैं ट्रांसपेरेंसी इस्तेमाल कर सकता हूँ?
हाँ। स्टॉप के रंग के रूप में alpha वैल्यू वाला rgba(), hsl() या oklch() इस्तेमाल करें (जैसे rgba(0, 0, 0, 0.5))।
हार्ड स्ट्राइप कैसे बनाऊं?
दो स्टॉप एक ही पोज़िशन पर रखें (जैसे yellow 5% और black 5%) और Repeating gradient चालू करें, जैसा Stripes प्रीसेट में है।