CSS ग्रेडिएंट जनरेटर
CSS ग्रेडिएंट क्या है?
CSS ग्रेडिएंट आपको इमेज फ़ाइलों का उपयोग किए बिना दो या अधिक रंगों के बीच सहज बदलाव प्रदर्शित करने देता है। ये तीन प्रकार में आते हैं: linear-gradient (सीधी रेखा के साथ), radial-gradient (केंद्र बिंदु से फैलता), और conic-gradient (केंद्र बिंदु के चारों ओर घूमता)। ग्रेडिएंट बैकग्राउंड, बटन, ओवरले और सजावटी तत्वों के लिए उपयोग किए जाते हैं।
CSS ग्रेडिएंट जनरेटर का उपयोग कैसे करें
-
स्वॉच से एक प्रीसेट चुनें या अपना खुद का ग्रेडिएंट कॉन्फ़िगर करें।
-
ग्रेडिएंट प्रकार चुनें: linear, radial या conic।
-
कोण (linear/conic के लिए) या आकार (radial के लिए) समायोजित करें।
-
रंग स्टॉप संपादित करें — रंग और स्थिति (0–100%) बदलें।
-
आवश्यकतानुसार रंग स्टॉप जोड़ें या हटाएं।
-
CSS कॉपी करें और अपनी स्टाइलशीट में पेस्ट करें।
अक्सर पूछे जाने वाले प्रश्न
मैं एक पारदर्शी ग्रेडिएंट कैसे बना सकता हूँ? rgba() या hsla() रंग मानों का उपयोग करें जिनमें पूर्ण पारदर्शिता के लिए 0 का अल्फा चैनल हो। उदाहरण के लिए, rgba(0,0,0,0) का एक रंग स्टॉप पूरी तरह से पारदर्शी काला है, जो छवियों पर फीके पड़ने वाले ओवरले के लिए उपयोगी है।
मैं एक कठोर रंग स्टॉप (कोई संक्रमण नहीं) कैसे बना सकता हूँ? एक ही स्थिति में दो रंग स्टॉप रखें - एक समाप्त हो रहा है और एक उस बिंदु पर शुरू हो रहा है। उदाहरण के लिए, लाल 50%, नीला 50% बीच बिंदु पर लाल से नीले रंग में तत्काल स्विच बनाता है जिसमें कोई ग्रेडिएंट संक्रमण नहीं है।
कौन से ब्राउज़र कोनिक ग्रेडिएंट का समर्थन करते हैं? कोनिक ग्रेडिएंट सभी आधुनिक ब्राउज़रों में समर्थित हैं (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+)। वे Internet Explorer में समर्थित नहीं हैं।
क्या मैं एक ही तत्व पर कई ग्रेडिएंट का उपयोग कर सकता हूँ? हाँ। CSS background कॉमा-अलग परतों की एक सूची स्वीकार करता है। आप ग्रेडिएंट को स्टैक कर सकते हैं, उन्हें पृष्ठभूमि छवियों के साथ संयोजित कर सकते हैं, और प्रत्येक परत की स्थिति और आकार को स्वतंत्र रूप से नियंत्रित कर सकते हैं।
Keywords: CSS ग्रेडिएंट जनरेटर, लीनियर ग्रेडिएंट, रेडियल ग्रेडिएंट, कोनिक ग्रेडिएंट, CSS बैकग्राउंड जनरेटर, ग्रेडिएंट रंग पिकर, CSS ग्रेडिएंट टूल