CSS ग्रेडिएंट्स विज़ुअली बनाएँ
ग्रेडिएंट्स बिना किसी इमेज फ़ाइल के बटन्स, हीरो सेक्शन, कार्ड्स और बैकग्राउंड में गहराई और रंग जोड़ते हैं। हालांकि, इन्हें खुद कोड करने का मतलब है एंगल्स और प्रतिशत का अंदाज़ा लगाना और पेज को बार-बार रीलोड करना। यह CSS ग्रेडिएंट जनरेटर आपको लाइव प्रीव्यू के साथ ग्रेडिएंट को विज़ुअली डिज़ाइन करने की सुविधा देता है और एकदम क्लीन, कॉपी-रेडी CSS कोड देता है जो सभी मॉडर्न ब्राउज़र्स में काम करता है।
फ़ीचर्स
- तीन प्रकार के ग्रेडिएंट्स: लीनियर (linear), रेडियल (radial - वृत्त या अंडाकार) और कोनिक (conic)।
- आठ कलर स्टॉप्स तक जिन्हें ड्रैग करके पोज़िशन किया जा सकता है।
- लीनियर और कोनिक ग्रेडिएंट्स के लिए एंगल स्लाइडर।
- तुरंत आइडिया के लिए प्रीसेट्स और रैंडम बटन।
- CSS कोड में सॉलिड फ़ॉलबैक कलर शामिल है।
- एक क्लिक में कोड कॉपी करें।
CSS का इस्तेमाल कैसे करें
आप जिस एलिमेंट को स्टाइल करना चाहते हैं, उसके CSS रूल में इस कोड को पेस्ट करें:
.hero {
background: #0ea5e9;
background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
}
CSS में ग्रेडिएंट्स इमेजेज़ की तरह काम करते हैं, इसलिए आप इन्हें background-image में भी इस्तेमाल कर सकते हैं, कॉमा लगाकर कई ग्रेडिएंट्स की लेयर बना सकते हैं, या इन्हें किसी फ़ोटो के साथ जोड़ सकते हैं: background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(photo.jpg); यह कोड तस्वीर को डार्क कर देता है ताकि उसके ऊपर लिखा सफ़ेद टेक्स्ट आसानी से पढ़ा जा सके।
डिज़ाइन टिप्स
- इसे हल्का रखें। विपरीत रंगों की तुलना में दो आस-पास के रंग (नीले से बैंगनी, नारंगी से गुलाबी) ज़्यादा स्मूथ और आधुनिक दिखते हैं।
- कंट्रास्ट चेक करें। अगर टेक्स्ट ग्रेडिएंट पर है, तो सुनिश्चित करें कि यह दोनों सिरों पर आसानी से पढ़ा जा सके — Color Converter से रंगों को टेस्ट करें, जो कंट्रास्ट रेशियो दिखाता है।
- ब्रांड इमेज से रंग निकालें Image Color Picker की मदद से।
- डेप्थ (गहराई) दें कार्ड्स और बटन्स को Box Shadow Generator के ज़रिए।