मेश ग्रेडिएंट जेनरेटर
लेयर्ड radial ग्रेडिएंट से मुलायम मेश-शैली CSS बैकग्राउंड बनाएं। कलर पॉइंट ड्रैग करें, स्प्रेड सेट करें, सीड से रैंडमाइज़ करें और शुद्ध CSS कोड कॉपी करें।
मेश सेटिंग्स
रंग बिंदु
प्रीव्यू
प्रीव्यू में हैंडल खींचें या सटीक मान टाइप करें।
background-color: #ff99cc; background-image: radial-gradient(at 0% 0%, #ffb3ba 0, transparent 50%), radial-gradient(at 100% 0%, #bae1ff 0, transparent 50%), radial-gradient(at 100% 100%, #baffc9 0, transparent 50%), radial-gradient(at 0% 100%, #ffffba 0, transparent 50%);
संबंधित टूल्स
सभी देखेंमेश ग्रेडिएंट जेनरेटर क्या है?
यह साधारण CSS से लोकप्रिय मुलायम "मेश ग्रेडिएंट" लुक बनाता है: एक बैकग्राउंड रंग और कई radial ग्रेडिएंट, जिनमें से हर एक कलर पॉइंट से शुरू होकर पारदर्शी में घुल जाता है। आप प्रीव्यू में ड्रैग करके या पोज़िशन टाइप करके अधिकतम आठ पॉइंट रख सकते हैं।
मेश ग्रेडिएंट जेनरेटर का उपयोग कैसे करें
- Background color चुनें।
- कोई कलर पॉइंट चुनें और उसका Color, Spread और Position X / Position Y सेट करें, या प्रीव्यू में पॉइंट को ड्रैग करें।
- कितने रंग मिलें (1–8) यह बदलने के लिए Add point / Remove point दबाएं।
- नया मेश पाने के लिए Randomize क्लिक करें, या Seed डालकर Apply seed दबाएं ताकि वही नतीजा दोबारा मिले।
- CSS कोड कॉपी करें।
उदाहरण
Default 4 points, background #ff99cc
background-color: #ff99cc; background-image: radial-gradient(at 0% 0%, #ffb3ba 0, transparent 50%), radial-gradient(at 100% 0%, #bae1ff 0, transparent 50%), radial-gradient(at 100% 100%, #baffc9 0, transparent 50%), radial-gradient(at 0% 100%, #ffffba 0, transparent 50%);
मेश ग्रेडिएंट जेनरेटर का उपयोग कब करें
इसे हीरो बैकग्राउंड, लैंडिंग पेज, ऐप स्प्लैश स्क्रीन और glassmorphism कार्ड के पीछे धुंधले रंगीन बैकड्रॉप के लिए इस्तेमाल करें। सटीक सीधे कलर ट्रांज़िशन के लिए CSS Gradient Generator चुनें; असली मेश वार्पिंग के लिए वेक्टर टूल या canvas/WebGL शेडर चाहिए।
मेश ग्रेडिएंट जेनरेटर कैसे काम करता है
हर पॉइंट radial-gradient(at x% y%, color 0, transparent spread%) बनता है और सभी background-color के ऊपर background-image में सूचीबद्ध होते हैं। हर ग्रेडिएंट पारदर्शी में घुलता है, इसलिए रंग ओवरलैप होकर स्मूद मिलते हैं। Randomize सीडेड pseudo-random जेनरेटर (mulberry32) इस्तेमाल करता है: वही सीड और पॉइंट की संख्या हमेशा वही रंग और पोज़िशन देती है। यह असली मेश ग्रेडिएंट का अनुमान है (CSS में असली मेश नहीं होता), bilinear patch मेश नहीं।
सामान्य उपयोग मामले
- लैंडिंग पेज के हीरो बैकग्राउंड
- glassmorphism कार्ड के बैकड्रॉप
- ब्लॉग कवर के लिए रंगीन प्लेसहोल्डर
- ऐप ऑनबोर्डिंग स्क्रीन
- डिज़ाइन सिस्टम में सीड से दोहराए जा सकने वाले बैकग्राउंड
अक्सर पूछे जाने वाले प्रश्न
क्या यह असली मेश ग्रेडिएंट है?
कोई CSS प्रॉपर्टी असली मेश ग्रेडिएंट नहीं बनाती। पारदर्शी में घुलने वाले radial ग्रेडिएंट को लेयर करना वह मानक CSS तकनीक है जो लगभग वैसा ही मुलायम लुक देती है।
Spread क्या करता है?
यह वह दूरी है (एलिमेंट के प्रतिशत में) जहाँ पॉइंट का रंग पूरी तरह घुल जाता है। बड़ी वैल्यू रंग को ज़्यादा क्षेत्र में फैलाती है।
क्या मुझे वही रैंडम मेश दोबारा मिल सकता है?
हाँ। Seed वैल्यू नोट कर लें और बाद में Apply seed दबाएं; उतने ही पॉइंट के साथ वही सीड वही मेश बना देती है।