CSS ग्रेडिएंट जेनरेटर — मुफ़्त ऑनलाइन
लाइव प्रीव्यू के साथ सुंदर CSS लीनियर, रेडियल और कोनिक ग्रेडिएंट बनाएं। CSS कोड तुरंत कॉपी करें।
Who uses the CSS ग्रेडिएंट जेनरेटर?
- हीरो सेक्शन और UI कंपोनेंट के लिए बैकग्राउंड ग्रेडिएंट बनाने वाले फ़्रंटएंड डेवलपर।
- ग्रेडिएंट-आधारित विज़ुअल आइडेंटिटी और ब्रांड कलर ट्रांज़िशन प्रोटोटाइप करने वाले डिज़ाइनर।
- एक विज़ुअल, इंटरैक्टिव बिल्डर के ज़रिए ग्रेडिएंट सिंटैक्स समझने वाले CSS सीखने वाले।
How the CSS ग्रेडिएंट जेनरेटर works
ग्रेडिएंट टाइप चुनें: Linear, Radial, या Conic।
उसका रंग बदलने के लिए किसी कलर स्टॉप के स्वैच पर क्लिक करें और कलर पिकर इस्तेमाल करें।
हर स्टॉप के बगल में मौजूद स्लाइडर से उसकी पोज़िशन एडजस्ट करें, या नया स्टॉप जोड़ने के लिए "+ Add color stop" पर क्लिक करें।
एंगल एडजस्ट करें (linear/conic), फिर आउटपुट पैनल से CSS कोड कॉपी करें।
Tips & tricks
- आपको कम से कम 2 कलर स्टॉप चाहिए — हटाने (×) का बटन तभी दिखता है जब 3 या उससे ज़्यादा स्टॉप हों।
- रेडियल ग्रेडिएंट एंगल कंट्रोल छुपा देता है क्योंकि केंद्रित सर्कल ग्रेडिएंट में एडजस्ट करने के लिए कोई दिशा नहीं होती।
- आपने स्टॉप जिस भी क्रम में जोड़े हों, आउटपुट CSS में वे हमेशा पोज़िशन के क्रम में दिखते हैं।
- कलर पिकर alpha चैनल/पारदर्शिता सपोर्ट नहीं करता — अगर पारदर्शी स्टॉप चाहिए तो कॉपी किए गए CSS में मैन्युअली rgba() जोड़ें।
Frequently Asked Questions
लीनियर ग्रेडिएंट के लिए CSS सिंटैक्स क्या है?
background: linear-gradient(दिशा, रंग1, रंग2)। उदाहरण: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)। दिशा एक एंगल (45deg) या कीवर्ड (to right, to bottom right) हो सकती है।
रेडियल ग्रेडिएंट कैसे बनाएं?
background: radial-gradient(आकार साइज़ at पोज़िशन, रंग1, रंग2)। उदाहरण: background: radial-gradient(circle at center, #f6d365 0%, #fda085 100%)। यह टूल एक केंद्रित सर्कल रेडियल ग्रेडिएंट जनरेट करता है।
क्या मैं दो से ज़्यादा कलर स्टॉप जोड़ सकता हूँ?
हां। जितनी ज़रूरत हो उतनी बार "+ Add color stop" पर क्लिक करें। हर स्टॉप का अपना कलर पिकर और पोज़िशन स्लाइडर होता है, और आउटपुट CSS में स्टॉप अपने आप पोज़िशन के हिसाब से क्रमबद्ध हो जाते हैं।
पारदर्शी ग्रेडिएंट कैसे बनाएं?
पारदर्शी स्टॉप के लिए alpha वाले rgba() या हेक्स का इस्तेमाल करें। उदाहरण: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%) अंधेरे में फीका होने वाला असर बनाता है — टेक्स्ट की पठनीयता के लिए हीरो इमेज पर ओवरले के तौर पर आमतौर पर इस्तेमाल होता है। इस टूल के कलर पिकर में alpha चैनल नहीं है, इसलिए पारदर्शिता के लिए कॉपी किए गए CSS को मैन्युअली एडिट करें।
क्या CSS ग्रेडिएंट सभी ब्राउज़र में काम करता है?
CSS ग्रेडिएंट सभी आधुनिक ब्राउज़र (Chrome, Firefox, Safari, Edge, Opera) में सपोर्टेड हैं। आधुनिक ब्राउज़र के लिए वेंडर प्रीफ़िक्स (-webkit-) की सख़्ती से ज़रूरत नहीं है, हालांकि यह टूल पुराने ब्राउज़र कवरेज के लिए आउटपुट में -webkit- प्रीफ़िक्स वाली लाइन शामिल करता है।
Is my data safe when using the CSS ग्रेडिएंट जेनरेटर?
Completely safe. The CSS ग्रेडिएंट जेनरेटर processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the CSS ग्रेडिएंट जेनरेटर output in commercial projects?
Yes. The CSS ग्रेडिएंट जेनरेटर is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the CSS ग्रेडिएंट जेनरेटर follow official standards?
Yes. The CSS ग्रेडिएंट जेनरेटर is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.