CSS ग्रेडिएंट के बुनियादी सिद्धांत
CSS ग्रेडिएंट वेब डिज़ाइन में बैकग्राउंड को आकर्षक बनाने का एक प्रभावी तरीका हैं। यह तकनीक दो या दो से अधिक रंगों को आपस में मिलाती है, जिससे बिना किसी भारी इमेज फ़ाइल के स्मूथ ट्रांज़िशन तैयार होता है। ग्रेडिएंट जेनरेटर टूल की मदद से आप अपनी पसंद के अनुसार लीनियर, रेडियल या कॉनिक ग्रेडिएंट बना सकते हैं, उनके ऐंगल या शेप को नियंत्रित कर सकते हैं और सीधे CSS कोड प्राप्त कर सकते हैं।
इस टूल में शुरुआत दो कलर स्टॉप के साथ होती है: #6366f1 0% और #ec4899 100%। आप अपनी ज़रूरत के हिसाब से इसमें बदलाव कर सकते हैं।
लीनियर ग्रेडिएंट: दिशा और कलर स्टॉप
लीनियर ग्रेडिएंट रंगों को एक सीधी रेखा में मिलाता है। इस रेखा की दिशा को नियंत्रित करने के लिए ऐंगल का उपयोग किया जाता है।
- दिशा का निर्धारण: ऐंगल स्लाइडर की मदद से आप दिशा तय करते हैं। इसमें 0° ऊपर की ओर इशारा करता है और 90° दाईं ओर इशारा करता है।
- रंगों का प्रवाह: रंग इस तय की गई रेखा के साथ एक सिरे से दूसरे सिरे तक बहते हैं।
वेब डिज़ाइनर और फ्रंट-एंड डेवलपर अक्सर दो रंगों और एक निश्चित दिशा का उपयोग करके साधारण बैकग्राउंड बनाने के लिए इसका इस्तेमाल करते हैं।
रेडियल ग्रेडिएंट: शेप और रंगों का फैलाव
रेडियल ग्रेडिएंट रंगों को केंद्र से बाहर की ओर फैलाता है। लीनियर ग्रेडिएंट के विपरीत, इसमें किसी ऐंगल स्लाइडर का उपयोग नहीं होता है। इसके बजाय, आप रंगों के फैलाव के लिए आकार चुनते हैं:
- अंडाकार: यह डिफ़ॉल्ट रूप से रंगों को अंडाकार रूप में फैलाता है।
- गोल: यह रंगों को केंद्र से एक समान दूरी पर गोल आकार में फैलाता है।
यह विकल्प तब उपयोगी होता है जब आपको किसी गोल या अंडाकार केंद्र से बाहर की ओर रंगों का बिखराव दिखाना हो।
कॉनिक ग्रेडिएंट: केंद्र के चारों ओर रंगों का घुमाव
कॉनिक ग्रेडिएंट रंगों को एक केंद्र बिंदु के चारों ओर घुमाता है, ठीक वैसे ही जैसे एक कलर व्हील में रंग दिखाई देते हैं।
- ऐंगल का प्रभाव: कॉनिक ग्रेडिएंट में ऐंगल स्लाइडर यह तय करता है कि रंगों का यह घुमाव किस कोण से शुरू होगा। इसमें भी 0° ऊपर की ओर और 90° दाईं ओर की दिशा को दर्शाता है।
- विशिष्टता: यह ग्रेडिएंट सीधे बहने या बाहर की ओर फैलने के बजाय एक कोणीय दिशा में घूमता है।
कलर स्टॉप की भूमिका और नियम
कलर स्टॉप यह तय करते हैं कि ग्रेडिएंट में कौन सा रंग किस स्थान पर रहेगा।
- पोज़िशन: हर कलर स्टॉप की पोज़िशन 0% (शुरुआत) से लेकर 100% (अंत) के बीच होती है।
- स्टॉप की सीमा: आप इस टूल में अधिकतम आठ कलर स्टॉप जोड़ सकते हैं।
- डिफ़ॉल्ट पोज़िशन: जब भी आप कोई नया कलर स्टॉप जोड़ते हैं, तो वह डिफ़ॉल्ट रूप से 50% की पोज़िशन पर सेट होता है।
- बटन की स्थिति: जब टूल में पूरे आठ कलर स्टॉप जोड़ दिए जाते हैं, तब "स्टॉप जोड़ें" बटन अक्षम (disabled) हो जाता है।
ग्रेडिएंट जेनरेटर टूल का उपयोग कैसे करें
इस टूल का उपयोग करके आप आसानी से अपनी पसंद का CSS कोड तैयार कर सकते हैं:
- ग्रेडिएंट टाइप चुनें: सबसे पहले "ग्रेडिएंट टाइप" के तहत "लीनियर", "रेडियल" या "कॉनिक" में से कोई एक विकल्प चुनें।
- दिशा या शेप सेट करें: यदि आपने लीनियर या कॉनिक चुना है, तो "ऐंगल" स्लाइडर को एडजस्ट करें। यदि रेडियल चुना है, तो "शेप" के अंतर्गत "अंडाकार" या "गोल" चुनें।
- कलर स्टॉप जोड़ें और बदलें: "स्टॉप का रंग" और उसकी "पोज़िशन" (0% से 100%) सेट करें। आप "स्टॉप जोड़ें" पर क्लिक करके नए स्टॉप जोड़ सकते हैं या "स्टॉप हटाएँ" से उन्हें हटा सकते हैं।
- लाइव प्रीव्यू देखें: जैसे-जैसे आप बदलाव करेंगे, आपको स्क्रीन पर उसका लाइव विज़ुअल प्रीव्यू दिखाई देगा।
- CSS कोड कॉपी करें: अंत में "CSS कॉपी करें" बटन पर क्लिक करें। क्लिक करते ही बटन की स्थिति बदलकर "Copied" हो जाएगी और कोड आपके क्लिपबोर्ड पर कॉपी हो जाएगा।
डेटा प्रोसेसिंग और गोपनीयता
इस टूल में आपकी गोपनीयता का पूरा ध्यान रखा जाता है। हर ग्रेडिएंट सीधे आपके ब्राउज़र में ही रेंडर होता है। यहाँ आप जो भी सेटिंग्स या रंग चुनते हैं, वह BroBroGo पर अपलोड नहीं होता है।
अक्सर पूछे जाने वाले प्रश्न (FAQ)
लीनियर, रेडियल और कॉनिक ग्रेडिएंट में क्या फ़र्क़ है?
लीनियर ग्रेडिएंट रंगों को एक सीधी रेखा पर मिलाता है, जिसकी दिशा आप ऐंगल से तय करते हैं। रेडियल ग्रेडिएंट उन्हें बीच से बाहर की ओर — गोल या अंडाकार — फैलाता है। कॉनिक ग्रेडिएंट उन्हें केंद्र के चारों ओर घुमाता है, कलर व्हील की तरह।
कलर स्टॉप क्या होते हैं?
हर कलर स्टॉप एक रंग है जो ग्रेडिएंट पर किसी जगह टिका होता है — शुरुआत में 0%, अंत में 100%। किसी स्टॉप को खिसकाकर तय करें कि उसका रंग कहाँ सबसे गाढ़ा हो, या ज़्यादा स्टॉप जोड़कर मेल को और समृद्ध बनाएँ। आप आठ तक जोड़ सकते हैं।
दिशा कैसे कंट्रोल करें?
लीनियर या कॉनिक ग्रेडिएंट में ऐंगल स्लाइडर दिशा तय करता है — 0° ऊपर की ओर, 90° दाईं ओर। रेडियल ग्रेडिएंट में ऐंगल नहीं होता; उसकी जगह गोल या अंडाकार शेप चुनकर बदलें कि वह कैसे फैलता है।