CSS ग्रेडिएंट जनरेटर: लीनियर, रेडियल और कोनिक ग्रेडिएंट विज़ुअली बनाएँ

1. ग्रेडिएंट इंटरफ़ेस को पॉलिश क्यों बनाते हैं

फ्लैट रंग सुरक्षित है; ग्रेडिएंट एक ही प्रॉपर्टी में गहराई, दिशा और मूड जोड़ता है। बटन, हीरो सेक्शन, कार्ड हेडर और लोडिंग स्क्रीन — सही ग्रेडिएंट से सब ज़्यादा जीवंत लगते हैं। CSS3 के ज़माने से वेब इसे इस्तेमाल करता है क्योंकि यह सस्ता और हर जगह चलता है।

मुश्किल सिर्फ़ डिज़ाइन है: मेल खाते रंग चुनना, एंगल तय करना, लीनियर/रेडियल/कोनिक में चुनाव। विज़ुअल जनरेटर हाथ से CSS लिखने की कोशिश-गलती खत्म करता है और नतीजा लाइव दिखाता है।

2. चरण-दर-चरण ग्रेडिएंट बनाएँ

आप स्क्रैच से, प्रीसेट से शुरू कर सकते हैं या रैंडमाइज़र से प्रेरणा ले सकते हैं। कुछ भी बदलते ही प्रीव्यू अपडेट होता है:

1. CSS Gradient Generator खोलें और Gradient Type चुनें: Linear, Radial या Conic।
2. रंग बदलने के लिए कलर स्टॉप पर क्लिक करें, स्थिति के लिए खींचें, और मिक्स होने वाले रंगों के लिए Add Stop / Remove इस्तेमाल करें।
3. Linear में Angle सेट करें (डिफ़ॉल्ट 135°), Radial में Radial Position चुनें (Center, कोने और किनारे)।
4. Presets देखें (Sunset, Ocean, Violet, Peach, Forest, Night, Candy, Aurora) या तुरंत आइडिया के लिए Random दबाएँ।
5. Code टैब पर जाएँ, Copy CSS दबाएँ और स्टाइलशीट में पेस्ट करें। मॉकअप या सोशल ग्राफ़िक के लिए Download PNG से इमेज बनाएँ।

3. प्रीसेट और रैंडम बटन डिज़ाइन के शॉर्टकट हैं

दो अच्छे रंग चुनना ग्रेडिएंट डिज़ाइन का सबसे कठिन हिस्सा है। आठ बिल्ट-इन प्रीसेट पहले से काम करने वाले कॉम्बिनेशन हैं — वैसे ही इस्तेमाल करें या शुरुआती पैलेट मानकर एक स्टॉप ट्वीक करें।

• Sunset: गर्म नारंगी से हरा — खाने या यात्रा थीम के लिए।
• Ocean और Night: ठंडे नीले — प्रोफेशनल या टेक इंटरफ़ेस के लिए।
• Candy और Aurora: चटकीले, मज़ेदार कॉम्बो — लैंडिंग पेज और इलस्ट्रेशन के लिए।

Random कोई खिलौना नहीं: कई बार दबाएँ, और जब कोई कॉम्बिनेशन आँखों को भाए तो उसे ठीक करें। अक्सर ऐसा ग्रेडिएंट मिलेगा जो आप कलर व्हील पर कभी नहीं चुनते।

4. अक्सर पूछे जाने वाले सवाल

लीनियर, रेडियल और कोनिक ग्रेडिएंट में क्या अंतर है?

लीनियर एक सीधी रेखा पर तय कोण से मिलाता है। रेडियल केंद्र से बाहर गोलों में फैलता है। कोनिक घड़ी की तरह केंद्र के चारों ओर घूमता है — चमकदार रिंग वाले बटन या रंगीन पहियों के लिए।

क्या दो से ज़्यादा रंग इस्तेमाल कर सकते हैं?

हाँ। Add Stop ग्रेडिएंट पर कहीं भी नया स्टॉप जोड़ता है, और हर स्टॉप को अलग से घुमाया और रंगा जा सकता है। अमीर दिखने वाले डिज़ाइन के लिए 3–4 स्टॉप काफ़ी हैं।

क्या कॉपी किया CSS सभी ब्राउज़रों में चलता है?

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