ग्रेडिएंट जनरेटर क्या है?

विज़ुअल CSS ग्रेडिएंट बिल्डर जो असीमित कलर स्टॉप्स के साथ लीनियर, रेडियल और कोनिक ग्रेडिएंट बनाने देता है। रंग, कोण और पोज़ीशन रियल टाइम में बदलें और एक क्लिक में CSS कॉपी करें।

रैखिक, रेडियल और शंक्वाकार ग्रेडिएंट में से चुनें, 0° से 360° तक कोण तय करें और जितने चाहें उतने कलर स्टॉप जोड़ें — हर स्टॉप के लिए अलग ओपेसिटी के साथ ताकि पारदर्शी ओवरले बन सकें। सूर्यास्त, Instagram या महासागर जैसे चुने हुए प्रीसेट से शुरुआत करें, फिर रंग बारीकी से समायोजित करें। रेडियल ग्रेडिएंट में वृत्त या दीर्घवृत्त आकृति और विस्तार कीवर्ड चुन सकते हैं, और ब्लेंड को OKLab या OKLCH पर बदलकर अधिक चिकनी आधुनिक इंटरपोलेशन पा सकते हैं या ईज़िंग कर्व लगा सकते हैं। चलती हुई पृष्ठभूमि के लिए «एनिमेट करें» चालू करें और पेस्ट करने को तैयार @keyframes लूप पाएं। आउटपुट शुद्ध CSS है जिसे आप स्टाइलशीट, Tailwind कॉन्फ़िग या डिज़ाइन टूल में सीधे पेस्ट कर सकते हैं।

उपयोग कैसे करें

1. चरण 1 — अपना ग्रेडिएंट प्रकार चुनें (लीनियर, रेडियल या कोनिक) और एंगल स्लाइडर या प्रीसेट बटन का उपयोग करके दिशा या कोण सेट करें।
2. चरण 2 — ग्रेडिएंट बार पर क्लिक करके कलर स्टॉप्स जोड़ें। प्रत्येक स्टॉप का रंग और पोज़ीशन ड्रैग करके या सटीक मान दर्ज करके समायोजित करें।
3. चरण 3 — ग्रेडिएंट का लाइव प्रिव्यू देखें, फिर जनरेट हुई CSS कोड को क्लिपबोर्ड पर कॉपी करें या CSS फ़ाइल के रूप में डाउनलोड करें।

कब उपयोग करें

• Photoshop खोले बिना हीरो सेक्शन, बटन और कार्ड बैकग्राउंड डिज़ाइन करना।
• वेबसाइट, ईमेल और प्रेज़ेंटेशन में ब्रांड पैलेट एक जैसा रखना।
• डेवलपर को स्पेक देने से पहले CSS इफ़ेक्ट खुद टेस्ट कर लेना।

परिणाम

मान लीजिए आपको सनसेट थीम का हीरो बैकग्राउंड चाहिए। 135° लीनियर ग्रेडिएंट चुनें, 0% पर ऑरेंज, 50% पर रोज़ और 100% पर पर्पल रखें, फिर CSS को अपनी स्टाइलशीट में पेस्ट कर दें।

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

लीनियर, रेडियल और कोनिक ग्रेडिएंट में फ़र्क़ क्या है?

लीनियर सेट किए एंगल पर एक सीधी रेखा में रंग बदलता है। रेडियल किसी केंद्र से बाहर की ओर फैलता है, जैसे सूरज की रोशनी। कोनिक केंद्र के चारों ओर घूमता है, पाई चार्ट या कलर व्हील के लिए उपयोगी।

कितने कलर स्टॉप जोड़े जा सकते हैं?

कोई हार्ड लिमिट नहीं है। ज़्यादातर डिज़ाइन में दो से चार स्टॉप काफ़ी होते हैं। पाँच-छह से ऊपर रंग आपस में घुलकर मटमैले लगने लगते हैं और साफ़ ट्रांज़िशन छूट जाता है।

डार्क बैकग्राउंड पर बैंडिंग की धारियाँ क्यों दिखती हैं?

जब आसपास के रंगों की चमक बहुत मिलती-जुलती होती है तब बैंडिंग दिखती है। स्टॉप के बीच कंट्रास्ट बढ़ाएँ, रंग सम्मिश्रण को OKLCH या OKLab (अनुभूति आधारित) पर बदलें, या CSS में हल्की नॉइज़ परत डालें।

क्या ये ग्रेडिएंट Figma या Sketch में इस्तेमाल हो सकते हैं?

CSS कोड सीधे पेस्ट नहीं होगा, लेकिन रंग के मान और प्रतिशत स्थान एक-के-एक मेल खाते हैं। हर स्टॉप का hex वैल्यू और परसेंटेज अपने डिज़ाइन टूल के ग्रेडिएंट एडिटर में डाल दीजिए।

एंगल पैरामीटर वास्तव में क्या तय करता है?

लीनियर ग्रेडिएंट में 0° ऊपर की ओर इशारा करता है और एंगल घड़ी की दिशा में घूमता है — 90° बाएँ से दाएँ, 180° ऊपर से नीचे। कोनिक में एंगल यह तय करता है कि गोले पर रंगों का घूमना कहाँ से शुरू हो।

संबंधित उपकरण