लीनियर और रेडियल CSS ग्रेडिएंट विज़ुअली डिज़ाइन करें, रंग और कोण एडजस्ट करें, और CSS कॉपी करें।
CSS ग्रेडिएंट आधुनिक वेब के बैकग्राउंड पैटर्न हैं। लीनियर ग्रेडिएंट चुने हुए कोण पर एक लाइन के साथ रंगों को ब्लेंड करता है; रेडियल ग्रेडिएंट उन्हें केंद्र बिंदु से बाहर की ओर ब्लेंड करता है। दोनों एक ही CSS प्रॉपर्टी में डिक्लेयर होते हैं, बिना इमेज फाइल के किसी भी रेज़ोल्यूशन पर रेंडर होते हैं, और नेटवर्क वेट में कुछ भी खर्च नहीं करते। यह जेनरेटर डिक्लेरेशन को विज़ुअली बनाता है।
दो या तीन रंग चुनें, लीनियर के लिए कोण सेट करें या रेडियल के लिए छोड़ दें, और प्रीव्यू रिजल्ट दिखाता है। नीचे की CSS लाइन कॉपी के लिए तैयार है — इसे background प्रॉपर्टी के रूप में पेस्ट करें और यह पिछले दशक में रिलीज़ हुए हर ब्राउज़र में काम करती है। तीन रंग दो से ज़्यादा समृद्ध ग्रेडिएंट बनाते हैं, और बीच का रंग वह है जो डिज़ाइन को बनाता या बिगाड़ता है।
टूल आपके ब्राउज़र में चलता है। कोई सर्वर कॉल नहीं, कोई इमेज जेनरेट नहीं, कोई फाइल डाउनलोड करने के लिए नहीं। आप प्रीव्यू में जो देखते हैं वही ब्राउज़र CSS से रेंडर करता है, जिसका मतलब है कि प्रोडक्शन में रिजल्ट एकसमान होगा।
हां। CSS ग्रेडिएंट हर आधुनिक ब्राउज़र में सपोर्टेड हैं। जेनरेट किया गया कोड वेंडर प्रीफिक्स के बिना स्टैंडर्ड सिंटैक्स का उपयोग करता है।
टूल तीन कलर स्टॉप्स देता है। ज़्यादा जटिल ग्रेडिएंट्स के लिए, तीन-स्टॉप कोड से शुरू करें और अपनी CSS में मैन्युअली स्टॉप्स जोड़ें।
डिग्री में ग्रेडिएंट की दिशा। 0 ऊपर जाता है, 90 दाएं जाता है, 180 नीचे जाता है। स्लाइडर 0 से 360 तक कवर करता है।
हां। ग्रेडिएंट को background-image के रूप में लागू करें, background-clip: text और color: transparent सेट करें। यह टूल जो CSS जेनरेट करता है वह background-image हिस्सा है।
नहीं। यह एक CSS डिक्लेरेशन है। ब्राउज़र इसे गणितीय रूप से रेंडर करता है, इसलिए यह किसी भी आकार में शार्प है और पेज में कोई वज़न नहीं जोड़ता।
Vai.la किसी भी URL को क्लिक आंकड़ों, QR Code और आपके अपने बायोलिंक के साथ एक शॉर्ट लिंक में बदल देता है।
टूल्स का इस्तेमाल कैसे होता है या उनके परिणामों के आधार पर लिए गए निर्णयों के लिए Vai.la ज़िम्मेदार नहीं है।