मुफ़्त CSS ग्रेडिएंट जेनरेटर

यह कैसे काम करता है

ग्रेडिएंट जनरेटर CSS ग्रेडिएंट स्ट्रिंग सीधे ब्राउज़र में बनाता है — कोई लाइब्रेरी नहीं, कोई सर्वर नहीं, कोई अपलोड नहीं। एक हाथ से लिखा फ़ंक्शन आपके कलर स्टॉप और एंगल से रीयल टाइम में सही linear-gradient, radial-gradient, या conic-gradient सिंटैक्स बनाता है, फिर आपके चुने आउटपुट टारगेट के लिए परिणाम फ़ॉर्मेट करता है।

1. 1
   स्टॉप और दिशा कॉन्फ़िगर करें

   आप ब्राउज़र के नेटिव कलर पिकर का उपयोग करके 2 से 6 कलर स्टॉप सेट करते हैं, फिर एक रेंज स्लाइडर के साथ हर स्टॉप को 0–100% अक्ष पर रखते हैं। लीनियर और conic ग्रेडिएंट के लिए आप एक एंगल (0–360°) भी चुनते हैं; रेडियल ग्रेडिएंट के लिए आप शेप (ellipse या circle) और साइज़ कीवर्ड चुनते हैं जो नियंत्रित करता है कि ग्रेडिएंट कितनी दूर तक फैलता है।
2. 2
   buildCss ग्रेडिएंट स्ट्रिंग असेंबल करता है

   हर बदलाव पर, एक स्थानीय buildCss फ़ंक्शन आपके पैरामीटर को सही CSS फ़ंक्शन कॉल में जोड़ता है — जैसे linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%)। कोई लाइब्रेरी शामिल नहीं; स्ट्रिंग सादे JavaScript टेम्पलेट लॉजिक से बनाई जाती है और सीधे स्टॉप array से जोड़ी जाती है।
3. 3
   लाइव प्रीव्यू इनलाइन स्टाइल के ज़रिए रेंडर होता है

   बनाई गई ग्रेडिएंट स्ट्रिंग सीधे एक div एलिमेंट पर इनलाइन बैकग्राउंड स्टाइल के रूप में लागू होती है, ताकि ब्राउज़र का अपना CSS इंजन प्रीव्यू रेंडर करे। कोई कैनवस या इमेज शामिल नहीं — आप जो देखते हैं वह शाब्दिक रूप से लागू हो रहा CSS प्रॉपर्टी है।
4. 4
   चार फ़ॉर्मेट में कॉपी-रेडी आउटपुट

   एक फ़ॉर्मेट सिलेक्टर वही ग्रेडिएंट स्ट्रिंग को सादे CSS (background: ...), एक CSS-विद-सॉलिड-फ़ॉलबैक ब्लॉक, एक Tailwind arbitrary-value क्लास, या एक SCSS वेरिएबल डिक्लेरेशन में बदलता है। Copy क्लिक करना चुने आउटपुट को navigator.clipboard.writeText के ज़रिए क्लिपबोर्ड में लिखता है। वर्तमान ग्रेडिएंट URL hash में भी एनकोड किया जाता है ताकि आप इसे बुकमार्क या शेयर कर सकें।

संबंधित टूल