ग्रेडिएंट जनरेटर

रैखिक, रेडियल और शंक्वाकार ग्रेडिएंट डिज़ाइन करें और CSS या चित्र निर्यात करें

फ़ाइलें आपके डिवाइस से बाहर नहीं जातीं
ब्राउज़र में चलता है
मुफ़्त, बिना खाते, बिना वॉटरमार्क

Color stops

Click the bar to add a stop. Drag handles to move them; arrow keys nudge, Delete removes.

Code

background: linear-gradient(135deg, #4f46e5 0%, #5d45e5 3.13%, #6a44e5 6.25%, #7643e3 9.38%, #8243e1 12.5%, #8d42de 15.63%, #9742db 18.75%, #a141d6 21.88%, #ab41d1 25%, #b541cc 28.13%, #be42c6 31.25%, #c642bf 34.38%, #cf42b8 37.5%, #d743b1 40.63%, #de44a9 43.75%, #e546a1 46.88%, #ec4899 50%, #f14b90 53.13%, #f54e87 56.25%, #f8527e 59.38%, #fb5775 62.5%, #fe5b6c 65.63%, #ff6063 68.75%, #ff665a 71.88%, #ff6c51 75%, #ff7247 78.13%, #ff783e 81.25%, #ff7e35 84.38%, #ff842b 87.5%, #fd8b21 90.63%, #fb9118 93.75%, #f89810 96.88%, #f59e0b 100%);
background: linear-gradient(in oklch 135deg, #4f46e5 0%, #ec4899 50%, #f59e0b 100%);

The first line is a fallback with precomputed stops for browsers without “in oklab/oklch” support.

ग्रेडिएंट जनरेटर का उपयोग कैसे करें

जितने चाहें रंग स्टॉप के साथ रैखिक, रेडियल और शंक्वाकार ग्रेडिएंट बनाएँ, sRGB, OKLab या OKLCH में मिश्रित। परिणाम CSS, Tailwind क्लास या SVG के रूप में कॉपी करें, या प्रति भुजा 8192 px तक PNG, JPG या WebP चित्र डाउनलोड करें।

1
प्रकार चुनें (रैखिक, रेडियल या शंक्वाकार) और कोण, आकृति या केंद्र सेट करें; रेडियल और शंक्वाकार के लिए केंद्र खिसकाने हेतु पूर्वावलोकन पर खींच सकते हैं।
2
रंग स्टॉप संपादित करें: स्टॉप जोड़ने के लिए पट्टी पर क्लिक करें, हैंडल खींचकर उन्हें खिसकाएँ, और सूची में हर रंग और स्थिति बदलें।
3
रंग किसमें मिलाएँ चुनें (sRGB, OKLab या OKLCH), या प्रीसेट या यादृच्छिक में से एक से शुरू करें।
4
CSS, Tailwind या SVG टैब से कोड कॉपी करें।
5
चित्र के लिए चौड़ाई और ऊँचाई सेट करें या आकार चुनें, PNG, JPG या WebP चुनें, और डाउनलोड पर क्लिक करें।

अक्सर पूछे जाने वाले प्रश्न

sRGB, OKLab और OKLCH मिश्रण में क्या अंतर है?

sRGB क्लासिक CSS मिश्रण है, जहाँ पूरक रंग बीच में धूसर हो सकते हैं। OKLab दृष्टिगत रूप से सम है, बीच में मैला नहीं होता। OKLCH वर्ण चक्र के चारों ओर घूमकर रंगों को चमकीला रखता है।

क्या OKLab और OKLCH ग्रेडिएंट पुराने ब्राउज़र में चलते हैं?

CSS आउटपुट एक फ़ॉलबैक पंक्ति से शुरू होता है जो “in oklab” या “in oklch” समर्थन न रखने वाले ब्राउज़र के लिए पूर्वगणना स्टॉप उपयोग करती है। SVG कोड और डाउनलोड चित्र भी पूर्वगणना स्टॉप उपयोग करते हैं, इसलिए वे हर जगह एक जैसे दिखते हैं।

शंक्वाकार ग्रेडिएंट के लिए SVG टैब अक्षम क्यों है?

SVG में शंक्वाकार ग्रेडिएंट नहीं है। इसके बजाय PNG, JPG या WebP चित्र डाउनलोड करें।

क्या मैं पारदर्शी स्टॉप उपयोग कर सकता हूँ?

हाँ, rgba() या #rrggbbaa जैसे अल्फ़ा वाले रंग चलते हैं। पारदर्शिता रखने के लिए PNG या WebP डाउनलोड करें, क्योंकि JPG में अल्फ़ा चैनल नहीं है।

क्या चित्र सर्वर पर बनता है?

नहीं। चित्र आपके ब्राउज़र के कैनवास पर बनाया जाता है और सीधे सहेजा जाता है, प्रति भुजा 1 से 8192 px किसी भी आकार पर।

कीबोर्ड से स्टॉप कैसे ठीक करूँ?

स्टॉप हैंडल पर फ़ोकस करें और उसे 1% खिसकाने के लिए तीर कुंजियाँ उपयोग करें (10% के लिए Shift), सिरों पर जाने के लिए Home या End, और हटाने के लिए Delete। ग्रेडिएंट हमेशा कम से कम दो स्टॉप रखता है।