इस लेख में
CSS ग्रेडिएंट क्या हैं?
CSS ग्रेडिएंट आपको छवियों का उपयोग किए बिना दो या अधिक रंगों के बीच सहज संक्रमण बनाने देते हैं। इन्हें ब्राउज़र स्वयं रेंडर करता है, जिससे ये रिज़ॉल्यूशन-स्वतंत्र और तेज़ी से लोड होने वाले बनते हैं। ग्रेडिएंट आधुनिक वेब डिज़ाइन के सबसे बहुमुखी उपकरणों में से एक हैं।
CSS ग्रेडिएंट तीन प्रकार के होते हैं: लीनियर (सीधी रेखा के साथ संक्रमण), रेडियल (केंद्र बिंदु से बाहर की ओर फैलता है) और कॉनिक (केंद्र बिंदु के चारों ओर घूमता है)। हर प्रकार कई कलर स्टॉप्स का समर्थन करता है, जिससे आप केवल एक ही CSS प्रॉपर्टी से जटिल, परतदार प्रभाव बना सकते हैं।
हमारा जनरेटर कैसे काम करता है
CheckTown का CSS ग्रेडिएंट जनरेटर तीनों प्रकार के ग्रेडिएंट बनाने के लिए एक सहज दृश्य इंटरफ़ेस प्रदान करता है। हर बदलाव प्रीव्यू और CSS आउटपुट को तुरंत अपडेट कर देता है।
- अपना ग्रेडिएंट प्रकार चुनें — लीनियर, रेडियल या कॉनिक — और कोण या स्थिति समायोजित करें
- एक क्लिक से कलर स्टॉप्स जोड़ें, हटाएँ और पुनः क्रमबद्ध करें। कलर पिकर का उपयोग करें या सीधे हेक्स कोड टाइप करें
- जनरेट किए गए CSS को एक क्लिक से कॉपी करें और सीधे अपनी स्टाइलशीट में पेस्ट करें
निःशुल्क आज़माएँ — कोई साइनअप आवश्यक नहीं
ग्रेडिएंट बनाएँ →CSS ग्रेडिएंट का उपयोग कब करें
ग्रेडिएंट बैकग्राउंड छवियों का एक हल्का विकल्प हैं और आपके डिज़ाइन में दृश्य गहराई जोड़ते हुए पेज लोड समय में नाटकीय सुधार कर सकते हैं।
- हीरो सेक्शन और बैनर — तेज़ लोड समय के लिए भारी बैकग्राउंड छवियों की जगह CSS ग्रेडिएंट का उपयोग करें
- बटन और कार्ड एक्सेंट — सूक्ष्म ग्रेडिएंट बैकग्राउंड बिना अतिरिक्त एसेट के गहराई जोड़ते हैं
- ओवरले और मास्क — टेक्स्ट की पठनीयता या कलात्मक प्रभावों के लिए छवियों पर ग्रेडिएंट की परत लगाएँ
अक्सर पूछे जाने वाले प्रश्न
क्या CSS ग्रेडिएंट सभी ब्राउज़रों में काम करते हैं?
हाँ। लीनियर और रेडियल ग्रेडिएंट Chrome, Firefox, Safari और Edge समेत सभी आधुनिक ब्राउज़रों में समर्थित हैं। कॉनिक ग्रेडिएंट भी व्यापक रूप से समर्थित हैं, जिनका वैश्विक कवरेज 95% से अधिक है।
क्या मैं CSS ग्रेडिएंट को एनिमेट कर सकता हूँ?
सीधे नहीं — CSS ग्रेडिएंट मानों के बीच संक्रमण नहीं कर सकता। हालाँकि, आप चलते हुए ग्रेडिएंट का भ्रम पैदा करने के लिए background-position या background-size प्रॉपर्टीज़ को एनिमेट कर सकते हैं, या अधिक उन्नत प्रभावों के लिए @keyframes के साथ CSS कस्टम प्रॉपर्टीज़ का उपयोग कर सकते हैं।
एक ग्रेडिएंट में कितने कलर स्टॉप्स हो सकते हैं?
CSS ग्रेडिएंट में कलर स्टॉप्स की संख्या पर कोई कठोर सीमा नहीं है। व्यावहारिक रूप से, 2 से 5 स्टॉप्स सबसे आम हैं। अधिक स्टॉप्स सहज, अधिक जटिल संक्रमण बनाते हैं पर बहुत पुराने उपकरणों पर रेंडरिंग प्रदर्शन को प्रभावित कर सकते हैं।