CSS ग्रेडिएंट जनरेटर (linear, radial, conic)
ग्रेडिएंट प्रकार चुनें, एंगल सेट करें, पोजीशन के साथ कलर स्टॉप जोड़ें या हटाएँ। लाइव प्रीव्यू। एक क्लिक से CSS background डिक्लेरेशन कॉपी करें।
कलर स्टॉप
- 0%
- 100%
कैसे काम करता है
CSS में तीन ग्रेडिएंट प्रकार
Linear gradient: रंग दिए गए एंगल पर एक सीधी रेखा के साथ बदलते हैं। 0° ऊपर की ओर, 90° दाईं ओर (डिफ़ॉल्ट), 180° नीचे। बैकग्राउंड, बटन, हीरो सेक्शन के लिए सबसे आम।
Radial gradient: रंग केंद्र बिंदु से बाहर की ओर बदलते हैं। आकार सर्कल (हमारा डिफ़ॉल्ट) या एलिप्स हो सकता है। स्पॉटलाइट इफेक्ट या ध्यान खींचने वाले सेंटरपीस के लिए सर्वोत्तम।
Conic gradient: रंग केंद्र बिंदु के चारों ओर घूमते हैं, जैसे कलर व्हील। पाई चार्ट, क्लॉक फेस, या डेकोरेटिव स्पिनर के लिए शक्तिशाली। 2020 के बाद आधुनिक ब्राउज़र में समर्थित।
कलर स्टॉप और प्रतिशत प्रणाली
प्रत्येक कलर स्टॉप में 0% से 100% तक एक रंग और पोजीशन होती है। 0% ग्रेडिएंट की शुरुआत है, 100% अंत है। दो स्टॉप एक सहज द्वि-रंग ग्रेडिएंट देते हैं। बीच में तीसरा स्टॉप जोड़ना एक त्रि-रंग मिश्रण बनाता है।
तीखे संक्रमण (कोई ब्लेंडिंग नहीं) के लिए, दो स्टॉप को अलग-अलग रंगों के साथ एक ही पोजीशन पर रखें। उदाहरण: '#000 50%, #fff 50%' मध्यबिंदु पर तीखा काला-सफेद विभाजन बनाता है।
परफॉर्मेंस और एक्सेसिबिलिटी टिप्स
ग्रेडिएंट बैकग्राउंड इमेज के विपरीत HTTP अनुरोध के बिना नेटिव रूप से रेंडर होते हैं। वे अनंत रूप से स्केल करते हैं। वे एनिमेशन-अनुकूल हैं।
एक्सेसिबिलिटी: जटिल ग्रेडिएंट के ऊपर सीधे टेक्स्ट न डालें यदि कंट्रास्ट ग्रेडिएंट में भिन्न होता है। WCAG AA के लिए सामान्य टेक्स्ट के लिए 4.5:1, बड़े टेक्स्ट के लिए 3:1 कंट्रास्ट आवश्यक है।
अक्सर पूछे जाने वाले प्रश्न
›क्या ग्रेडिएंट पुराने ब्राउज़र में समर्थित हैं?
Linear और radial ग्रेडिएंट Edge, Firefox, Chrome, Safari (2014 से) सहित सभी आधुनिक ब्राउज़र में काम करते हैं। Conic ग्रेडिएंट के लिए Chrome 69+, Firefox 83+, Safari 12.1+ की आवश्यकता है।
›क्या मैं React Native या मोबाइल ऐप में इनका उपयोग कर सकता हूँ?
Web CSS ग्रेडिएंट React Native में सीधे नहीं जाते — `react-native-linear-gradient` जैसी लाइब्रेरी का उपयोग करें।
›क्या मैं नामित रंगों का उपयोग कर सकता हूँ?
हाँ। कलर पिकर के बगल में टेक्स्ट इनपुट में किसी भी hex कोड को CSS रंग नाम से बदलें।
›मेरा conic gradient अजीब क्यों दिखता है?
Conic gradients आपके सेट किए एंगल से दक्षिणावर्त घूमते हैं। वे पूर्ण 360° रोटेशन को कवर करने वाले एकाधिक स्टॉप के साथ सबसे अच्छे दिखते हैं।
›मैं 'glow' इफेक्ट कैसे बनाऊँ?
पूरी तरह पारदर्शी एंड स्टॉप के साथ radial gradient का उपयोग करें: जैसे 'radial-gradient(circle, rgba(255,200,0,0.6) 0%, transparent 70%)'।
›क्या मैं ग्रेडिएंट को एनिमेट कर सकता हूँ?
CSS सीधे ग्रेडिएंट स्टॉप एनिमेट नहीं करता, लेकिन आप moving effect के लिए background-position एनिमेट कर सकते हैं।
›CSS इतना लंबा क्यों है?
प्रत्येक स्टॉप एक रंग और पोजीशन जोड़ता है। सरल परिणाम के लिए, 2-3 स्टॉप से चिपके रहें।
›क्या डेटा मेरे ब्राउज़र से बाहर जाता है?
नहीं। सब कुछ स्थानीय रूप से गणना किया जाता है; कुछ भी सर्वर को नहीं भेजा जाता।
संबंधित टूल्स
अंतिम अपडेट: