CSS ग्रेडिएंट जनरेटर
दो से पाँच रंगों को लीनियर, रेडियल या कोनिक CSS ग्रेडिएंट में बदलें — लाइव प्रीव्यू, कॉपी करने लायक कोड और एक क्लिक में हार्मनाइज़्ड पैलेट के साथ।
Color stops
Palettes
background-color: #7C3AED; /* fallback for old browsers */ background-image: -webkit-linear-gradient(135deg, #7C3AED 0%, #EC4899 100%); background-image: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
0° points up and 90° to the right — the angle runs clockwise.
यह टूल पूरी तरह आपके ब्राउज़र में चलता है। आपका डेटा कभी आपके डिवाइस से बाहर नहीं जाता — किसी सर्वर पर अपलोड नहीं होता।
इस्तेमाल कैसे करें
- 1दो से पाँच रंग सेट करें, या किसी प्रीसेट पैलेट से शुरू करें।
- 2ग्रेडिएंट का प्रकार चुनें, फिर एंगल या शेप तय करें; चाहें तो पोज़िशन पिन करें।
- 3CSS ब्लॉक कॉपी करके अपनी स्टाइलशीट में पेस्ट करें।
CSS ग्रेडिएंट जनरेटर
दो से पाँच रंग चुनें, लीनियर, रेडियल या कोनिक चुनें और एंगल खींचें — टाइप करते ही प्रीव्यू बदलता है और CSS हमेशा एक कॉपी दूर रहता है। किसी स्टॉप की पोज़िशन खाली छोड़ें तो वह CSS की तरह अपने आप तय हो जाती है; सटीक प्रतिशत देकर हार्ड स्टॉप और केंद्र से हटे ब्लेंड बना सकते हैं।
आउटपुट सचमुच प्रोडक्शन-स्तर का ब्लॉक है: पुराने ब्राउज़रों के लिए सॉलिड-कलर फ़ॉलबैक लाइन, पुराने WebKit के लिए -webkit- प्रीफ़िक्स वाली लाइन और अंत में स्टैंडर्ड सिंटैक्स। रैंडम-हार्मनाइज़ बटन आपकी पैलेट के ह्यूज़ को HSL स्पेस में घुमाता है, इसलिए हर फेरबदल संतुलित रहता है, टकराता नहीं।
अक्सर पूछे जाने वाले सवाल
CSS में -webkit- प्रीफ़िक्स वाली लाइन क्यों है?
यह पुराने WebKit ब्राउज़रों (लगभग Safari 5-6 दौर) के लिए संगतता लाइन है जो सिर्फ़ -webkit-linear-gradient समझते थे। पिछले दशक का हर ब्राउज़र स्टैंडर्ड लाइन पढ़ता है, इसलिए वे वर्शन नहीं सँभालने हैं तो प्रीफ़िक्स वाली लाइन हटा सकते हैं — रखने की कीमत एक लाइन, हटाने की कोई नहीं।
लीनियर ग्रेडिएंट का एंगल क्या दर्शाता है?
यह ग्रेडिएंट की चलने की दिशा है, ऊपर की ओर से घड़ी की दिशा में नापी जाती है: 0deg नीचे से ऊपर, 90deg बाएँ से दाएँ, 180deg ऊपर से नीचे। टूल कोई भी एंगल सामान्य कर देता है (−45, 315 बन जाता है) और पुराने सिंटैक्स की उलटी दिशा वाली परंपरा -webkit- लाइन में पहले से सँभाली गई है।
मिलते-जुलते टूल
कंट्रास्ट जाँचक
दो रंगों के बीच WCAG कंट्रास्ट अनुपात निकालें — सामान्य और बड़े टेक्स्ट के लिए AA व AAA का नतीजा तुरंत — और लाइव प्रीव्यू से अपनी आँखों से जाँचें। सब कुछ आपके ब्राउज़र में।
सभी टूल →
कलर कन्वर्टर
रंग हेक्स, rgb() या hsl() में पेस्ट करें और तीनों फ़ॉर्मैट साथ में आपके डिज़ाइन सिस्टम के लिए तैयार टिंट-शेड की रो पाएँ।
सभी टूल →
कलर पिकर
स्वैच से रंग चुनें या EyeDropper API से सीधे स्क्रीन से उठाएँ — हेक्स, RGB और HSL एक क्लिक में कॉपी।
सभी टूल →
इमेज बॉर्डर
एक इमेज या पूरे बैच के चारों ओर ठोस रंग या पारदर्शी बॉर्डर लगाएँ — लाइव प्रीव्यू, PNG या JPG आउटपुट, पूरी तरह आपके ब्राउज़र में चलता है।
सभी टूल →
यह टूल एम्बेड करें
एक लाइन में यह टूल अपनी साइट पर लगाएँ — यह विज़िटर के ब्राउज़र में चलता है।
<iframe src="https://zoyku.com/hi/tools/gradient-generator?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — gradient-generator" loading="lazy"></iframe>