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

आज CSS ग्रेडिएंट बैकग्राउंड, बटन या कार्ड को सजाने का सबसे हल्का और लचीला तरीका बन चुका है। अब इमेज एडिटर से PNG एक्सपोर्ट करने की ज़रूरत नहीं: ब्राउज़र आपके रंगों के बीच का संक्रमण वेक्टर रूप में, कुछ दर्जन बाइट्स में गणना करता है। CSS ग्रेडिएंट जनरेटर , यानी Volade स्क्रीन पर बनाते समय ठीक वही कोड देता है — एंगल, स्टॉप और ओरिजिन की स्थिति।

linear-gradient: दिशात्मक ग्रेडिएंट

फ़ंक्शन linear-gradient() एंगल लेता है, फिर स्टॉप: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%)। एंगल 0deg ऊपर की ओर इशारा करता है, 90deg दाईं ओर, 180deg नीचे की ओर। बिना एंगल के ब्राउज़र ऊपर से नीचे जाता है। हेडर, कॉल-टू-एक्शन बटन और सेक्शन बैनर के लिए यह सबसे ज़्यादा इस्तेमाल होने वाली सिंटैक्स है।

radial-gradient: हेलो और अंडाकार

फ़ंक्शन radial-gradient() एक बिंदु से शुरू होता है (डिफ़ॉल्ट रूप से केंद्र) और वृत्त या अंडाकार में फैलता है। ओरिजिन स्थिति at X% Y% लिखी जाती है: radial-gradient(circle at 50% 50%, …)। शीर्षक के पीछे हेलो, केंद्र पर केंद्रित हीरो बैकग्राउंड या कोमल सिंथेटिक छाया के लिए बेहतरीन। टूल X और Y के दो स्लाइडर देता है ताकि आप ओरिजिन पिक्सल-दर-पिक्सल रख सकें।

conic-gradient: एक बिंदु के चारों ओर घुमाव

फ़ंक्शन conic-gradient() एक बिंदु के चारों ओर घूमता है, जैसे घड़ी की सुइयाँ। इसे conic-gradient(from 90deg at 50% 50%, …) लिखा जाता है और यह अंगूठी, गोल गेज, रंगीन बॉर्डर या प्रिज़्म इफ़ेक्ट बनाता है। हर स्टॉप एक कोणीय क्षेत्र लेता है: कई रंग रखकर आप बिना किसी इमेज के CSS पाई चार्ट बनाते हैं।

कलर स्टॉप (color stops)

हर स्टॉप एक रंग को प्रतिशत स्थिति से जोड़ता है: #7a2fe2 0%, #a358ee 55%, #f3e8ff 100%। दो रंगों पर समान स्थितियाँ एक स्पष्ट ट्रांज़िशन (कठोर किनारा); दूर की स्थितियाँ क्रमिक फेड बनाती हैं। दो से अधिक स्टॉप से बहु-रंग पैलेट, बैंड या सामग्री के अनुकरण (धातु, मोती, ऑरोरा) बनते हैं।

ग्रेडिएंट ओवरले करें और बैकअप रखें

शॉर्टहैंड में background में क्रम महत्वपूर्ण है: अग्रभाग पहले। फ़ोटो पर गहरा वुअल ऐसे लिखा जाता है: background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,0)), url(photo.webp);. हमेशा एक सपाट रंग बैकअप के रूप में (background-color) बहुत पुराने ब्राउज़रों के लिए या इमेज लोड होने के दौरान रखें।

परफ़ॉर्मेंस की अच्छी प्रथाएँ

CSS ग्रेडिएंट हर रीसाइज़ पर दोबारा गणना होता है: स्टॉप की संख्या उचित रखें (90% मामलों में 2 से 5 काफ़ी हैं) और मोबाइल पर बहुत बड़े क्षेत्रों पर कई परतें चढ़ाने से बचें। इन मानों को तरजीह दें hex या HSL जैसे स्थिर मान, और डिज़ाइन तय होते ही एंगल फ़िक्स कर दें ताकि ब्राउज़रों के बीच सूक्ष्म अंतर न आएं।

Volade ब्रांड के अनुरूप ग्रेडिएंट

ग्रेडिएंट के व्युत्पन्न बनाने से पहले सुसंगत पैलेट के लिए, मिलाएँ पैलेट जनरेटर और कलर पिकर : अपने ब्रांड के रंग पहचानें, फिर उन्हें यहाँ स्टॉप के रूप में चिपकाएँ। नतीजा सीधे आपके CSS, डिज़ाइन सिस्टम या थीम में कॉपी होता है — कंप्यूटर और मोबाइल दोनों पर, बिना अकाउंट और बिना डेटा भेजे।