CSS ग्रेडिएंट जनरेटर
CSS ग्रेडिएंट जनरेटर लीनियर, रेडियल और कोनिक CSS ग्रेडिएंट बनाने के लिए एक विज़ुअल एडिटर है। पोज़ीशन कंट्रोल के साथ मल्टीपल कलर स्टॉप्स जोड़ें, एंगल, शेप और सेंटर पोज़ीशन एडजस्ट करें, और रियल-टाइम फ़ुल-साइज़ प्रीव्यू देखें। एक क्लिक में जनरेटेड CSS कोड कॉपी करें। ओपैसिटी, प्रीसेट पैलेट और रैंडम ग्रेडिएंट जनरेशन सपोर्ट। 100% क्लाइंट-साइड — मुफ़्त, साइन-अप की ज़रूरत नहीं।
कलर स्टॉप्स
CSS कोड
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
प्रीसेट्स
कोई सुझाव है?
नया टूल अनुरोध करें या सुधार सुझाएं — हमारे Slack समुदाय में शामिल हों!
CSS ग्रेडिएंट क्या है?
CSS ग्रेडिएंट दो या अधिक रंगों के बीच एक स्मूथ ट्रांज़िशन है जिसे ब्राउज़र बैकग्राउंड इमेज के रूप में रेंडर करता है। CSS तीन प्रकार के ग्रेडिएंट सपोर्ट करता है: लीनियर (सीधी लाइन के साथ), रेडियल (एक केंद्र बिंदु से बाहर की ओर), और कोनिक (एक केंद्र बिंदु के चारों ओर)। ग्रेडिएंट इमेज फ़ाइलों की ज़रूरत खत्म करते हैं, पेज लोड टाइम कम करते हैं, और किसी भी रेज़ोल्यूशन पर पूरी तरह स्केल होते हैं। CSS ग्रेडिएंट जनरेटर आपको विज़ुअली ग्रेडिएंट डिज़ाइन करने और तुरंत प्रोडक्शन-रेडी CSS कोड कॉपी करने की सुविधा देता है।
इस CSS ग्रेडिएंट जनरेटर का उपयोग कैसे करें
- ग्रेडिएंट टाइप चुनें: लीनियर, रेडियल, या कोनिक
- कलर पिकर पर क्लिक करके और पोज़ीशन एडजस्ट करके कलर स्टॉप्स जोड़ें या बदलें
- ज़रूरत अनुसार एंगल (लीनियर/कोनिक), शेप (रेडियल), या सेंटर पोज़ीशन एडजस्ट करें
- बड़े प्रीव्यू पैनल में रियल टाइम में ग्रेडिएंट का प्रीव्यू देखें
- जनरेटेड CSS कोड को एक क्लिक में कॉपी करें और अपनी स्टाइलशीट में पेस्ट करें
अक्सर पूछे जाने वाले सवाल
लीनियर, रेडियल और कोनिक ग्रेडिएंट में क्या अंतर है?
लीनियर ग्रेडिएंट एक निर्दिष्ट कोण पर सीधी लाइन के साथ रंग बदलते हैं। रेडियल ग्रेडिएंट एक केंद्र बिंदु से बाहर की ओर वृत्त या दीर्घवृत्त आकार में फैलते हैं। कोनिक ग्रेडिएंट एक केंद्र बिंदु के चारों ओर कलर व्हील की तरह रंग घुमाते हैं। प्रत्येक प्रकार अलग-अलग डिज़ाइन इफ़ेक्ट के लिए उपयोगी है — लीनियर बैकग्राउंड के लिए, रेडियल स्पॉटलाइट इफ़ेक्ट के लिए, और कोनिक पाई चार्ट या डेकोरेटिव एलिमेंट्स के लिए।
मैं कितने कलर स्टॉप्स जोड़ सकता हूँ?
आप जितने चाहें उतने कलर स्टॉप्स जोड़ सकते हैं। हर स्टॉप ग्रेडिएंट के साथ एक रंग और उसकी पोज़ीशन (0-100%) को परिभाषित करता है। ज़्यादा स्टॉप जटिल मल्टी-कलर ट्रांज़िशन बनाने की अनुमति देते हैं। आप सेमी-ट्रांसपेरेंट इफ़ेक्ट के लिए हर स्टॉप की ओपैसिटी भी एडजस्ट कर सकते हैं।
क्या मैं जनरेटेड CSS किसी भी फ़्रेमवर्क में उपयोग कर सकता हूँ?
हाँ। जनरेटेड CSS स्टैंडर्ड ग्रेडिएंट सिंटैक्स का उपयोग करता है जो सभी आधुनिक ब्राउज़र (Chrome, Firefox, Safari, Edge) द्वारा सपोर्टेड है। यह प्लेन CSS, SCSS, Tailwind CSS (आर्बिट्रेरी वैल्यूज़ के माध्यम से), React इनलाइन स्टाइल्स, और किसी भी CSS-in-JS लाइब्रेरी के साथ काम करता है।
क्या CSS ग्रेडिएंट पेज परफ़ॉर्मेंस को प्रभावित करते हैं?
CSS ग्रेडिएंट ब्राउज़र के GPU द्वारा रेंडर किए जाते हैं और बेहद तेज़ होते हैं। वे समान विज़ुअल इफ़ेक्ट के लिए इमेज फ़ाइलें लोड करने से बहुत तेज़ हैं। ग्रेडिएंट किसी भी स्क्रीन रेज़ोल्यूशन पर पूरी तरह स्केल होते हैं, जो उन्हें रिस्पॉन्सिव डिज़ाइन के लिए आदर्श बनाता है।
क्या मेरा डेटा सुरक्षित है?
हाँ। यह टूल 100% आपके ब्राउज़र में चलता है। कोई कलर डेटा, CSS कोड, या ग्रेडिएंट सेटिंग्स किसी सर्वर पर अपलोड नहीं की जाती। सब कुछ आपकी डिवाइस पर लोकली प्रोसेस होता है।