Tool overview
CSS ग्रेडिएंट जनरेटर क्या है?
CSS ग्रेडिएंट जनरेटर एक टूल है जो आपको oKLCH, conic और Tailwind के साथ मल्टी-स्टॉप CSS ग्रेडिएंट डिज़ाइन करने में मदद करता है।
CSS ग्रेडिएंट जनरेटर क्यों उपयोग करें?
जब आपको oKLCH, conic और Tailwind के साथ मल्टी-स्टॉप CSS ग्रेडिएंट डिज़ाइन करने की ज़रूरत हो तो यह पठनीयता और गति बढ़ाता है — पूरी तरह ब्राउज़र में, बिना सर्वर अपलोड के।
मुख्य विशेषताएँ
क्लाइंट-साइड गोपनीयता, तत्काल परिणाम और एक-क्लिक कॉपी। OKLCH, conic और Tailwind के साथ मल्टी-स्टॉप CSS ग्रेडिएंट डिज़ाइन करने
उपयोग कैसे करें
ऊपर दिए टूल से सटीक परिणाम पाने के लिए इन चरणों का पालन करें।
- linear, radial या कोनिक चुनें और लाइव प्रीव्यू पर रंग स्टॉप जोड़ें।
- कोण या केंद्र स्थिति समायोजित करें, चिकने ब्लेंड के लिए OKLCH चालू करें, और जरूरत पर sRGB से तुलना करें।
- CSS, Tailwind arbitrary क्लास या CSS कस्टम प्रॉपर्टी कॉपी करें—या बाद में ग्रेडिएंट बहाल करने के लिए शेयर लिंक कॉपी करें।
- मौजूदा background: linear-gradient(...) को Import CSS में चिपकाकर स्टॉप पुनर्निर्मित करें।
- संबंधित टूल से रंग कन्वर्टर या WCAG कंट्रास्ट खोलकर स्टॉप रंग सत्यापित करें।
CSS ग्रेडिएंट जनरेटर गाइड: linear-gradient, OKLCH, कोनिक और Tailwind
इस मुफ़्त जनरेटर से CSS Color 4 OKLCH इंटरपोलेशन, @supports फ़ॉलबैक, Tailwind क्लास और साझा योग्य URL के साथ मल्टी-स्टॉप linear-gradient, radial-gradient और conic-gradient CSS बनाएँ।
रैखिक ग्रेडिएंट
डिग्री में कोण, असीमित रंग स्टॉप, स्थिति और अपारदर्शिता। वैकल्पिक in oklch इंटरपोलेशन।
रेडियल ग्रेडिएंट
प्रतिशत केंद्र से वृत्त या दीर्घवृत्त, मल्टी-स्टॉप रंग रैंप के साथ।
कोनिक ग्रेडिएंट
केंद्र के चारों ओर from-कोण से रंग घुमाएँ—पाई और इंद्रधनुष प्रभावों के लिए।
मल्टी-स्टॉप रंग और अपारदर्शिता
स्टॉप जोड़ें, हटाएँ, उलटाएँ या यादृच्छिक करें; पेस्ट किया background CSS आयात करें।
OKLCH रंग इंटरपोलेशन
डिफ़ॉल्ट परसेप्चुअल ब्लेंड; पुराने ब्राउज़रों के लिए @supports sRGB फ़ॉलबैक।
CSS, Tailwind और CSS वेरिएबल
background CSS, Tailwind arbitrary क्लास, या :root कस्टम प्रॉपर्टी निर्यात करें।
साझा योग्य URL और CSS आयात
?g= / #g= में कॉन्फ़िग सिंक करें और पेस्ट किए ग्रेडिएंट CSS से पुनर्स्थापित करें।
एक्सेसिबिलिटी हैंडऑफ़
चयनित स्टॉप को WCAG कंट्रास्ट और रंग कन्वर्टर में डीप-लिंक करें।
CSS ग्रेडिएंट टेक्स्ट
ग्रेडिएंट निर्यात कर background-clip: text और पारदर्शी टेक्स्ट रंग लगाएँ (Safari के लिए -webkit-background-clip: text)।
CSS ग्रेडिएंट बॉर्डर
निर्यात ग्रेडिएंट को padding वाले wrapper और अंदर ठोस बैकग्राउंड पर लगाएँ, या उसी ग्रेडिएंट से border-image।
CSS ग्रेडिएंट एनिमेट करें
यहाँ स्थैतिक CSS निर्यात करें, फिर stylesheet में background-position या कस्टम प्रॉपर्टी एनिमेट करें।
CSS gradient border
Common patterns: (1) a padded wrapper with the exported gradient background and an inner element with a solid fill, or (2) `border-image` using the same gradient. Prefer the wrapper approach when you need rounded corners and consistent cross-browser results.
Animating CSS gradients
This generator exports static gradient CSS. Animate in your stylesheet by shifting `background-position` on a larger gradient, or by transitioning CSS custom properties that feed into `linear-gradient()` / `conic-gradient()`.
अक्सर पूछे जाने वाले प्रश्न
सामान्य डिबगिंग समस्याओं और डेटा गोपनीयता से जुड़े विस्तृत उत्तर।
आधिकारिक दस्तावेज़ और संदर्भ
इस उपयोगिता के लिए प्रामाणिक विनिर्देश और प्लेटफ़ॉर्म दस्तावेज़।