मेश ग्रेडिएंट जनरेटर क्या है?
वेबसाइट बैकग्राउंड, सोशल मीडिया ग्राफ़िक्स और UI डिज़ाइन के लिए मल्टी-कलर मेश ग्रेडिएंट बनाएं। रंग चुनें, कंट्रोल पॉइंट्स सेट करें, और सामान्य लीनियर या रेडियल पैटर्न से आगे के ऑर्गैनिक ग्रेडिएंट पाएं।
कैनवास कई रेडियल ग्रेडिएंट एक के ऊपर एक रखता है, हर कंट्रोल पॉइंट के लिए एक। मिश्रण को नया आकार देने के लिए कोई पॉइंट खींचें, स्वैच से उसका रंग बदलें, और कोड लाइव अपडेट होता रहता है। अधिकतम छह पॉइंट परिणाम को संतुलित रखते हैं। इसे 1920x1080 जैसे बैनर आकारों में PNG या SVG के रूप में एक्सपोर्ट करें, SVG को सीधे Figma में पेस्ट करें, या कोड को CSS, SCSS या Tailwind के रूप में लें।
उपयोग कैसे करें
- कलर स्वैच पर क्लिक करके या हेक्स वैल्यू दर्ज करके अपने बेस रंग चुनें। अधिकतम 6 कलर कंट्रोल पॉइंट जोड़ सकते हैं।
- कैनवास पर कंट्रोल पॉइंट्स को ड्रैग करके ग्रेडिएंट की दिशा बदलें।
- कोड को CSS, SCSS या Tailwind के रूप में कॉपी करें, या ग्रेडिएंट को PNG या SVG के रूप में डाउनलोड करें।
कब उपयोग करें
- ऐसा हीरो बैकग्राउंड डिज़ाइन करना जो टेम्पलेट जैसा न लगे।
- प्रोडक्ट कार्ड या प्लेलिस्ट आर्टवर्क में फ़ोटो के बिना रंग भरना।
- ऐप लोडिंग स्क्रीन और एम्प्टी स्टेट के लिए प्लेसहोल्डर बैकग्राउंड तैयार करना।
परिणाम
एक UI डिज़ाइनर लैंडिंग पेज के हीरो सेक्शन के लिए 4 कंट्रोल पॉइंट्स वाला पर्पल-टू-टील मेश ग्रेडिएंट बनाता है, फिर CSS कॉपी करके सीधे अपनी स्टाइलशीट में पेस्ट करता है।
अक्सर पूछे जाने वाले प्रश्न
- मेश ग्रेडिएंट और लीनियर ग्रेडिएंट में क्या फ़र्क है?
- लीनियर ग्रेडिएंट एक धुरी पर दो रंग ब्लेंड करता है। मेश ग्रेडिएंट कई हल्के रंगों के धब्बे एक के ऊपर एक रखता है, तो असर साफ़ ट्रांज़िशन के बजाय वाटरकलर वॉश जैसा होता है। रंगों की सीमा पकड़ना मुश्किल हो जाता है।
- CSS conic-gradient के बजाय radial-gradient क्यों इस्तेमाल करता है?
- स्टैक्ड radial-gradient को सबसे ज़्यादा ब्राउज़र समर्थन मिलता है और इनकी फ़ॉलबैक भी साफ़ रहती है। टूल हर कंट्रोल पॉइंट के लिए एक radial-gradient बनाता है और background-image से स्टैक करता है, जिससे हर मॉडर्न ब्राउज़र में पॉलीफ़िल के बिना काम करता है।
- क्या मेरा मेश ग्रेडिएंट Safari और Chrome में एक जैसा दिखेगा?
- हाँ। आउटपुट मानक CSS radial-gradient का इस्तेमाल करता है, किसी वेंडर प्रिफ़िक्स की ज़रूरत नहीं। Safari, Chrome, Firefox, Edge सभी एक जैसा परिणाम दिखाते हैं। बहुत पुराने ब्राउज़र पहले रंग पर रुक जाते हैं।
- अधिकतम कितने कंट्रोल पॉइंट इस्तेमाल कर सकते हैं?
- छह तक। ज़्यादा जोड़ने से मिक्स आम तौर पर समृद्ध नहीं, बल्कि गंदा हो जाता है। दो-तीन पॉइंट साफ़ ग्राफ़िक स्टाइल वाले ग्रेडिएंट देते हैं, चार से छह वाटरकलर जैसी ज़्यादा कलात्मक वॉश बनाते हैं।
- क्या ग्रेडिएंट को SVG के रूप में एक्सपोर्ट कर सकते हैं?
- हाँ। SVG एक्सपोर्ट ग्रेडिएंट को स्टैक की गई radial-gradient परतों से बनाता है, इसलिए यह हर उस जगह दिखता है जहाँ CSS ग्रेडिएंट चलते हैं और Figma में किसी शेप के फिल के रूप में सीधे पेस्ट हो जाता है। स्पेक के मुताबिक असली SVG मेश ग्रेडिएंट को अभी कहीं भी समर्थन नहीं है, इसीलिए यह स्टैक वाला तरीका वही संस्करण है जो आप जहाँ भी पेस्ट करें वहाँ वाकई काम करता है।