CSS ग्रेडिएंट जेनरेटर

यह कैसे काम करता है

एक CSS लीनियर ग्रेडिएंट (linear-gradient) बिना किसी इमेज या बाहरी डिज़ाइन टूल के एक विज़ुअली समृद्ध बैकग्राउंड — बैनर, बटन, सेक्शन बैकग्राउंड — बनाने देता है। दो रंग और एक कोण चुनें, लाइव प्रीव्यू देखें, फिर जेनरेट की गई background प्रॉपर्टी सीधे अपनी स्टाइलशीट में कॉपी करें। यह अपनी ग्राफ़िक चार्टर में उसे बेहतर बनाने से पहले एक ग्रेडिएंट बैकग्राउंड को प्रोटोटाइप करने का सबसे तेज़ तरीका है।

क्या मैं ग्रेडिएंट में दो से ज़्यादा रंग इस्तेमाल कर सकता हूँ?

CSS नेटिव रूप से इसकी अनुमति देता है (उदाहरण के लिए linear-gradient(90deg, #fff, #f00, #00f)), लेकिन यह टूल जानबूझकर दो-रंग वाले ग्रेडिएंट पर केंद्रित है, जो किसी सेक्शन या बटन बैकग्राउंड के लिए सबसे आम उपयोग है। ज़्यादा जटिल ग्रेडिएंट के लिए, आप यहाँ जेनरेट किया गया परिणाम कॉपी करके अपने CSS में सीधे अतिरिक्त कलर स्टॉप जोड़ सकते हैं।

ग्रेडिएंट का कोण क्या दर्शाता है?

कोण उस दिशा को तय करता है जिसमें ग्रेडिएंट आगे बढ़ता है: 0° नीचे से ऊपर जाता है, 90° बाएँ से दाएँ जाता है, 180° ऊपर से नीचे जाता है, आदि। यह CSS फ़ंक्शन linear-gradient() द्वारा नेटिव रूप से इस्तेमाल किए जाने वाले कन्वेंशन जैसा ही है, इसलिए यहाँ कॉपी किया गया कोड बिल्कुल वही परिणाम देता है जो आप प्रीव्यू में देखते हैं।

100% लोकल प्रोसेसिंग: CSS कोड का जेनरेशन सीधे आपके ब्राउज़र में WebAssembly के ज़रिए होता है, बिना किसी बाहरी सर्वर कॉल के।