ग्रेडिएंट डिज़ाइन स्टूडियो
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
डेवलपर्स को विज़ुअल CSS ग्रेडिएंट जेनरेटर की आवश्यकता क्यों है?
CSS3 में, अपनी वेबसाइट के बैकग्राउंड में एक साधारण ठोस (Solid) रंग जोड़ना आसान है (`background: red;`)। लेकिन 3 अलग-अलग रंगों के बीच सुचारू रूप से संक्रमण (Transition) बनाने के लिए एक जटिल सिंटैक्स की आवश्यकता होती है, जैसे `linear-gradient(90deg, #ff0000 0%, #00ff00 50%, #0000ff 100%)`। उस कोड को मैन्युअल रूप से टाइप करके रंग प्रतिशत निर्धारित करने का प्रयास करना बहुत थकाऊ और निराशाजनक है। हमारा टूल एक विज़ुअल कलर पॉइंटर (रंग बिंदु) प्रणाली प्रदान करता है। बस रंगों को खींचें और छोड़ें (Drag and drop), कोण बदलें, और सिस्टम बिना किसी त्रुटि के आपके लिए सटीक सीएसएस कोड लिख देता है।
लीनियर और रेडियल सपोर्ट
चाहे आप पारंपरिक क्षैतिज/ऊर्ध्वाधर रंग मिश्रण (Linear) चाहते हों या केंद्र से बाहर की ओर आने वाला गोल प्रभाव (Radial)।
Multi-Stop Gradients
Add unlimited color stops and drag their positions to create complex multi-color gradients
Live Preview
See your gradient rendered in real-time as you adjust colors, positions, and the angle
अपना सही CSS बैकग्राउंड कैसे डिज़ाइन करें
प्रकार (Type) और कोण (Angle) चुनें
सबसे पहले तय करें कि आप लीनियर चाहते हैं या रेडियल। यदि आपने लीनियर चुना है, तो घुमाव (जैसे 45 डिग्री तिरछा) सेट करने के लिए एंगल स्लाइडर का उपयोग करें।
रंग बिंदु मिलाएं
डिफ़ॉल्ट रूप से दो रंग (प्रारंभ और अंत) होते हैं। अपना कस्टम हेक्स (Hex) कोड चुनने के लिए उन पर क्लिक करें। बीच में ट्रांज़िशन जोड़ने के लिए 'रंग जोड़ें' पर क्लिक करें।
नकल करें और लागू करें
ऊपर लाइव पूर्वावलोकन बॉक्स देखें। यदि यह बहुत अच्छा लग रहा है, तो बस CSS 'नकल करें' बटन पर क्लिक करें और इसे अपने `.css` फ़ाइल में `.my-box { ... }` के अंतर्गत पेस्ट करें।
वेबसाइट पर ग्रेडिएंट्स को लागू करने के लिए प्रेरणा
आधुनिक 3D (डेप्थ) कॉल-टू-एक्शन बटन
एक फ्लैट नीले रंग का उपयोग करने के बजाय, शीर्ष पर हल्का नीला और नीचे गहरा नीला उपयोग करने से बटन को एक यथार्थवादी स्पर्श करने योग्य (3D) प्रभाव मिलता है।
हीरो सेक्शन और पेज हेडर
SaaS वेबसाइटों के लिए सबसे लोकप्रिय प्रवृत्ति पेज के शीर्ष पर एक नरम, फैले हुए मोनोक्रोमेटिक वर्टिकल (Vertical) ग्रेडिएंट का उपयोग करना है।
छवि ओवरले (Image Overlays)
बैकग्राउंड छवि को मंद करने के लिए लाल से काले पारदर्शी (Transparent) ग्रेडिएंट का उपयोग करना ताकि उस पर सफेद टेक्स्ट स्पष्ट रूप से पढ़ा जा सके।
ग्रेडिएंट टेक्स्ट (Gradient Text)
सीएसएस क्लिप गुण (`background-clip: text`) का उपयोग करके, आप बैकग्राउंड के बजाय सीधे अपने <h1> शीर्षकों के ऊपर एक इंस्टाग्राम (Instagram) जैसा इंद्रधनुषी प्रभाव डाल सकते हैं।
सुंदर CSS ग्रेडिएंट्स के लिए डिज़ाइन नियम
✓ सूक्ष्म (Subtle) रंगों का प्रयोग करें
सबसे खराब ग्रेडिएंट वे हैं जो पूरी तरह से अलग-अलग चरम रंगों (जैसे नियॉन हरे से लेकर गहरे बैंगनी) का उपयोग करते हैं। एक ही रंग के दो थोड़े अलग रंगों (जैसे हल्का नीला और मध्यम नीला) का उपयोग करके एक साफ और प्रीमियम लुक प्राप्त करें।
✓ सही कोण (Angles)
अधिकांश प्राकृतिक प्रकाश ऊपर से नीचे (180deg) आता है, यही कारण है कि ऊर्ध्वाधर (Vertical) ग्रेडिएंट आंखों को इतने स्वाभाविक लगते हैं। थोड़ा अधिक गतिशील (Dynamic) अनुभव के लिए विकर्ण (Diagonal - 45deg या 135deg) कोणों का प्रयास करें।
✓ 'पारदर्शी' (Transparent) रंग स्टॉप
याद रखें कि आप 'पारदर्शी' (rgba(0,0,0,0)) को रंग के रूप में जोड़ सकते हैं! यह तब के लिए बढ़िया है जब आप चाहते हैं कि ग्रेडिएंट का आधा हिस्सा फीका पड़ जाए ताकि पृष्ठभूमि की कोई छवि दिखाई दे।
✓ टेक्स्ट के साथ कंट्रास्ट की जाँच करें
यदि आपका ग्रेडिएंट आधे में हल्का और आधे में बहुत गहरा है, तो सुनिश्चित करें कि शीर्ष पर आप जो भी टेक्स्ट (सफेद या काला) रखते हैं, वह संक्रमण (Transition) के दोनों किनारों पर सुपाठ्य (Readable) हो।
❓ अक्सर पूछे जाने वाले ग्रेडिएंट प्रश्न (FAQ)
लीनियर (Linear) और रेडियल (Radial) ग्रेडिएंट में क्या अंतर है?
`Linear` एक सीधी रेखा में होता है (बाएं से दाएं, या ऊपर से नीचे)। `Radial` एक वृत्त (Circle) या अंडाकार (Ellipse) है जो केंद्र बिंदु से शुरू होता है और किनारों की ओर बाहर की ओर फैलता (Radiate) है।
क्या CSS ग्रेडिएंट वेबसाइट के लोड समय (Speed) को धीमा कर देते हैं?
बिल्कुल नहीं! वास्तव में, वे लोड समय बढ़ाते हैं। अतीत में, डेवलपर्स को ग्रेडिएंट दिखाने के लिए भारी PNG या JPEG छवियों को लोड करना पड़ता था। CSS ग्रेडिएंट्स पूरी तरह से गणितीय होते हैं और ब्राउज़र द्वारा केवल कुछ बाइट्स कोड के साथ तुरंत रेंडर किए जाते हैं।
क्या CSS3 ग्रेडिएंट्स को सभी ब्राउज़रों का समर्थन प्राप्त है?
हाँ। `linear-gradient` और `radial-gradient` कई वर्षों से मानक रहे हैं। आपको अब पुराने (बहुत अप्रचलित) ब्राउज़रों के अलावा `webkit-prefix` जैसे किसी भी विक्रेता-उपसर्ग (Vendor-prefixes) का उपयोग करने की आवश्यकता नहीं है।
मैं सीएसएस कोड में `%` मानों को कैसे बदलूं?
प्रतिशत आपके 'रंग स्टॉप्स' हैं जो निर्धारित करते हैं कि एक नया रंग कहाँ से शुरू होना चाहिए। टूल में, यदि आप मध्य रंग स्टॉप को अपनी स्क्रीन के बाएँ या दाएँ खींचते हैं, तो आप स्वचालित रूप से जनरेट किए गए कोड में `%` बदलते हुए देखेंगे।