T

Text Machine

शक्तिशाली टेक्स्ट टूल्स, आपके ब्राउज़र में

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

लाइव पूर्वावलोकन के साथ लीनियर और रेडियल CSS ग्रेडिएंट डिज़ाइन करें। कलर स्टॉप जोड़ें, कोण सेट करें, और साफ़-सुथरा बैकग्राउंड CSS कॉपी करें — सब कुछ आपके ब्राउज़र में ही।

पूर्वावलोकन
ग्रेडिएंट

कोण

90°

कलर स्टॉप

#f5530c

%

#ffa94d

%

CSS

background: linear-gradient(90deg, #f5530c 0%, #ffa94d 100%);

CSS ग्रेडिएंट जेनरेटर का उपयोग कैसे करें

  1. 1

    ग्रेडिएंट का प्रकार चुनें

    लीनियर और रेडियल के बीच स्विच करें। लीनियर ग्रेडिएंट में आप डिग्री में मापे जाने वाले कोण स्लाइडर से दिशा भी तय कर सकते हैं।

  2. 2

    स्टॉप जोड़ें और उन्हें रंग दें

    हर रंग चुनने के लिए स्वैच पर क्लिक करें, और उसकी स्थिति 0 से 100 प्रतिशत के बीच सेट करें। कई रंगों के मिश्रण के लिए और कलर स्टॉप जोड़ें, या चीज़ों को सरल रखने के लिए कोई स्टॉप हटा दें।

  3. 3

    लाइव पूर्वावलोकन देखें

    पूर्वावलोकन पैनल आपके ग्रेडिएंट को ठीक वैसे ही दिखाता है जैसे वह किसी ब्राउज़र में रेंडर होगा, और आपके हर बदलाव के साथ अपडेट होता रहता है।

  4. 4

    CSS कॉपी करें

    जेनरेट की गई बैकग्राउंड लाइन कॉपी करें और उसे अपनी स्टाइलशीट में पेस्ट करें। यह मानक CSS है जो हर आधुनिक ब्राउज़र में काम करता है।

अक्सर पूछे जाने वाले प्रश्न

मैं CSS ग्रेडिएंट कैसे बनाऊँ?
लीनियर या रेडियल चुनें, कोण सेट करें, और जितने चाहें उतने कलर स्टॉप जोड़ें। पूर्वावलोकन लाइव अपडेट होता है, और उपयोग के लिए तैयार CSS नीचे एक बैकग्राउंड प्रॉपर्टी के रूप में दिखाई देता है, जिसे आप सीधे अपनी स्टाइलशीट में कॉपी कर सकते हैं।
लीनियर और रेडियल ग्रेडिएंट में क्या अंतर है?
लीनियर ग्रेडिएंट रंगों को एक सीधी रेखा के साथ मिलाता है, और आप उसकी दिशा को डिग्री में दिए कोण से नियंत्रित करते हैं। रेडियल ग्रेडिएंट केंद्र से बाहर की ओर एक वृत्त में रंगों को मिलाता है। दोनों एक ही कलर स्टॉप का उपयोग करते हैं; केवल मिश्रण का आकार बदलता है।
कलर स्टॉप क्या होते हैं?
कलर स्टॉप एक ऐसा रंग होता है जो ग्रेडिएंट के साथ 0 से 100 प्रतिशत तक की किसी स्थिति से जुड़ा होता है। दो स्टॉप एक साधारण दो-रंगों वाला मिश्रण बनाते हैं, जबकि और स्टॉप जोड़ने पर आप कई रंगों वाले समृद्ध ग्रेडिएंट बना सकते हैं। हर रंग कहाँ बैठता है यह बदलने के लिए स्थिति का मान बदलें।
मैं अपने प्रोजेक्ट में ग्रेडिएंट का उपयोग कैसे करूँ?
जेनरेट की गई लाइन कॉपी करें और उसे किसी भी एलिमेंट — जैसे कोई div या section — की बैकग्राउंड प्रॉपर्टी के रूप में पेस्ट करें। चूँकि यह सादा CSS है, यह बिना किसी इमेज या लाइब्रेरी के हर आधुनिक ब्राउज़र में काम करता है।
क्या मेरा डेटा किसी सर्वर पर अपलोड होता है?
नहीं। सब कुछ पूरी तरह आपके ब्राउज़र में चलता है। आप जो कुछ भी बनाते हैं वह कभी अपलोड, लॉग या संग्रहीत नहीं किया जाता, इसलिए आपका काम पूरी तरह निजी रहता है और आपके ऑफ़लाइन होने पर भी टूल काम करता रहता है।

संबंधित टूल्स

इन उपयोगी टूल्स के साथ आगे बढ़ें

HTML से टेक्स्ट कनवर्टर

JSON फ़ॉर्मेटर

Regex परीक्षक

JWT डिकोडर

CSS बॉक्स शैडो जेनरेटर

टेक्स्ट से HTML कन्वर्टर