Gradient का सिंटैक्स हाथ से लिखना झंझट भरा है: एंगल, स्टॉप का क्रम और परसेंटेज पोज़िशन सब एक-दूसरे पर असर डालते हैं, और एक छोटी सी टाइपिंग गलती पूरे background को चुपचाप तोड़ देती है। यह जनरेटर प्रीव्यू और कोड को हमेशा एक-दूसरे के बराबर रखता है - जो आप देखते हैं वही बाइट-दर-बाइट वह CSS है जो आप कॉपी करते हैं। यह पूरी तरह क्लाइंट-साइड पर चलता है, इसलिए आपका डिज़ाइन कहीं अपलोड नहीं होता।
मुफ़्त CSS Gradient Generator
पूरी तरह आपके ब्राउज़र में चलता है - न कुछ अपलोड, न साइन-अप।
प्रकार
कलर स्टॉप
CSS कोड
CSS gradient generator क्या है?
CSS gradient generator एक विज़ुअल टूल है जो आपके लिए linear-gradient(), radial-gradient() या conic-gradient() का कोड बना देता है। अपने रंग चुनें, स्टॉप की पोज़िशन ड्रैग करें, एंगल सेट करें, और तैयार CSS कॉपी करें, जबकि लाइव प्रीव्यू ठीक वही दिखाता है जो ब्राउज़र में रेंडर होगा। सब कुछ आपके ब्राउज़र के अंदर ही चलता है।
कैसे इस्तेमाल करें
- 1Gradient का प्रकार चुनें. Linear, radial या conic में से चुनें। Linear में एंगल स्लाइडर दिखता है; radial में शेप (circle या ellipse) और पोज़िशन जुड़ जाते हैं; conic में from-angle और पोज़िशन होते हैं।
- 2अपने कलर स्टॉप सेट करें. रंग चुनने के लिए हर स्वॉच पर क्लिक करें और स्टॉप को gradient पर खिसकाने के लिए उसकी स्लाइडर ड्रैग करें। 8 स्टॉप तक जोड़ें, या घटाकर कम से कम 2 तक ले आएं।
- 3दिशा एडजस्ट करें. एंगल स्लाइडर (0-360 डिग्री) ड्रैग करें या कोई पोज़िशन कीवर्ड चुनें। हर बदलाव पर प्रीव्यू तुरंत अपडेट होता है।
- 4CSS कॉपी करें. बैकग्राउंड डिक्लेरेशन लेने के लिए Copy दबाएं, इसमें एक सॉलिड-कलर फॉलबैक लाइन भी शामिल होती है, और इसे अपनी स्टाइलशीट में पेस्ट कर दें।
किसके लिए है
- फ्रंट-एंड डेवलपर्स जिन्हें हीरो, कार्ड या बटन के लिए बैकग्राउंड चाहिए और सिंटैक्स याद किए बिना सही
linear-gradient()लाइन चाहिए। - वेब और UI डिज़ाइनर जो किसी मॉकअप से मिलान कर रहे हैं: gradient को विज़ुअली फिर से बनाएं और जनरेट हुआ CSS सीधे डेव टीम को दें।
- ईमेल और लैंडिंग-पेज बनाने वाले जिन्हें एक सॉलिड-कलर फॉलबैक लाइन चाहिए ताकि पुराने क्लाइंट में डिज़ाइन ठीक से डिग्रेड हो - आउटपुट में यह अपने आप शामिल रहता है।
- CSS सीख रहे स्टूडेंट्स जो देखना चाहते हैं कि एंगल, कलर स्टॉप और gradient का प्रकार रिज़ल्ट को रियल टाइम में कैसे बदलते हैं।
अक्सर पूछे जाने वाले सवाल
क्या यह CSS gradient generator मुफ़्त है?
हां - 100% मुफ़्त, कोई साइन-अप नहीं, कोई वॉटरमार्क नहीं, कोई लिमिट नहीं। जितने चाहें उतने gradient बनाएं और CSS सीधे अपने प्रोजेक्ट में कॉपी करें।
क्या कुछ भी सर्वर पर अपलोड होता है?
नहीं। Gradient पूरी तरह आपके ब्राउज़र में सामान्य JavaScript से बनता और दिखता है। कोई रंग, कोड या इस्तेमाल का डेटा कहीं नहीं भेजा जाता।
Linear, radial और conic gradient में क्या फ़र्क है?
Linear gradient आपके चुने हुए एंगल पर एक सीधी रेखा के साथ रंगों को मिलाता है। Radial gradient एक केंद्र बिंदु से circle या ellipse के रूप में बाहर की ओर फैलता है। Conic gradient केंद्र बिंदु के चारों ओर रंगों को घुमाता है, जैसे कलर व्हील या पाई चार्ट।
CSS gradient में कलर स्टॉप कैसे काम करते हैं?
हर स्टॉप एक रंग को gradient लाइन पर 0% से 100% तक की किसी पोज़िशन के साथ जोड़ता है। ब्राउज़र पास वाले स्टॉप्स के बीच स्मूदली रंग मिलाता है। दो स्टॉप को एक ही पोज़िशन पर रखने से स्मूद मिलावट की जगह एक तेज़ धार बनती है - जो धारियों और पाई-चार्ट इफेक्ट के लिए काम आती है।
इन gradient को कौन-कौन से ब्राउज़र सपोर्ट करते हैं?
सभी मॉडर्न ब्राउज़र - Chrome, Firefox, Safari और Edge - बिना प्रीफिक्स के linear-gradient() और radial-gradient() सपोर्ट करते हैं; conic-gradient() 2020 से हर जगह सपोर्टेड है। कॉपी किए गए कोड में पुराने ब्राउज़र के लिए एक सॉलिड-कलर फॉलबैक भी शामिल रहता है।
क्या मैं जनरेट किए गए gradient को टेक्स्ट के रंग के रूप में इस्तेमाल कर सकता हूं?
सीधे नहीं - gradient रंग नहीं बल्कि इमेज होते हैं। gradient को टेक्स्ट एलिमेंट पर background-image के रूप में लगाएं, फिर background-clip: text और color: transparent जोड़ें ताकि gradient अक्षरों के अंदर से दिखे।
मेरे gradient में बैंडिंग क्यों दिख रही है?
बैंडिंग तब दिखती है जब दो दूर के स्टॉप एक जैसे रंगों की लंबी रेंज में मिलते हैं, जिससे 8-बिट कलर स्टेप्स साफ़ नज़र आने लगते हैं। इसे बीच में एक और कलर स्टॉप जोड़कर, मिलावट की दूरी छोटी करके, या ऐसे रंग चुनकर कम किया जा सकता है जो सिर्फ ह्यू में नहीं बल्कि लाइटनेस में भी अलग हों।