CSS ग्रेडिएंट जेनरेटर — आपके ब्राउज़र में ग्रेडिएंट बनाएँ
ग्रेडिएंट को दृश्य रूप से डिज़ाइन करें और एक क्लिक में CSS कॉपी करें।
यह टूल पूरी तरह आपके ब्राउज़र में चलता है। आपकी फ़ाइलें कभी अपलोड नहीं होतीं — वे आपके डिवाइस पर ही रहती हैं।
- 0%
- 100%
background: linear-gradient(90deg, #6d28d9 0%, #ec4899 100%);ग्रेडिएंट सिंटैक्स हाथ से लिखना झंझट भरा है — एक ग़लत प्रतिशत या भूली हुई इकाई और पूरा बैकग्राउंड बेकार हो जाता है। यह जेनरेटर आपको ग्रेडिएंट को दृश्य रूप से बनाने देता है: जितने चाहें उतने कलर स्टॉप जोड़ें, उनकी स्थितियाँ खींचें, लीनियर और रेडियल के बीच स्विच करें, और देखें कि प्रीव्यू तुरंत अपडेट होता है।
सब कुछ आपके ब्राउज़र में चलता है। न कोई साइन-अप है, न कोई सर्वर तक चक्कर और न ही कुछ इंस्टॉल करना है — जैसे ही आप कोई सेटिंग बदलते हैं, CSS आपके डिवाइस पर ही बन जाता है, सीधे आपकी स्टाइलशीट में कॉपी करने के लिए तैयार।
CSS ग्रेडिएंट जेनरेटर का उपयोग कैसे करें
- एक ग्रेडिएंट प्रकार चुनें — लीनियर या रेडियल।
- लीनियर ग्रेडिएंट के लिए, कोण को डिग्री में सेट करें।
- हर कलर स्टॉप को कलर पिकर और उसके पोज़िशन स्लाइडर से समायोजित करें।
- जब तक प्रीव्यू सही न दिखे, तब तक स्टॉप जोड़ें या हटाएँ।
- जेनरेट किए गए बैकग्राउंड नियम को कॉपी करने के लिए "CSS कॉपी करें" पर क्लिक करें।
अक्सर पूछे जाने वाले सवाल
यह कौन-सा CSS जेनरेट करता है?
यह मानक linear-gradient() या radial-gradient() फ़ंक्शन का उपयोग करते हुए एकल background प्रॉपर्टी आउटपुट करता है, ताकि आप इसे सीधे किसी भी स्टाइलशीट या इनलाइन स्टाइल में पेस्ट कर सकें।
मैं कितने कलर स्टॉप जोड़ सकता हूँ?
जितने आपको चाहिए। हर स्टॉप का अपना रंग और स्थिति होती है, और जैसे ही आप उन्हें जोड़ते, संपादित या हटाते हैं, ग्रेडिएंट लाइव अपडेट हो जाता है।
क्या कोण रेडियल ग्रेडिएंट पर लागू होता है?
नहीं। कोण केवल लीनियर ग्रेडिएंट को प्रभावित करता है। रेडियल ग्रेडिएंट केंद्र से बाहर की ओर फैलते हैं, इसलिए रेडियल चुने जाने पर कोण नियंत्रण छिपा रहता है।
क्या कुछ किसी सर्वर पर भेजा जाता है?
नहीं। यह टूल पूरी तरह आपके ब्राउज़र में चलता है। आपके रंग और जेनरेट किया गया CSS कभी आपके डिवाइस से बाहर नहीं जाते।