न्यूमॉर्फिज़्म जेनरेटर
दोहरी छायाओं के साथ नरम, उभरे हुए न्यूमॉर्फिक UI सतहें डिज़ाइन करें और CSS कॉपी करें।
—
कैनवास की पृष्ठभूमि तत्व के रंग से मेल खाती है — यही नरम, उभरा हुआ न्यूमॉर्फिक रूप बनाता है।
डिफ़ॉल्ट रूप से हल्की और गहरी छायाएँ आधार रंग से प्राप्त होती हैं। स्वयं सेट करने के लिए सक्षम करें।
न्यूमॉर्फिज़्म जेनरेटर के बारे में
Neumorphism Generator नरम, उभरा हुआ “soft UI” लुक डिज़ाइन करता है: एक ऐसा एलिमेंट जो अपने पीछे की सतह से दबाया या उभारा हुआ दिखता है। एक बेस कलर चुनें और टूल बाकी सब खुद निकाल लेता है, क्योंकि यह प्रभाव तभी काम करता है जब एलिमेंट और उसका बैकग्राउंड एक ही रंग साझा करें और गहराई पूरी तरह दो विपरीत box-shadows से आए।
स्लाइडर ज्यामिति को नियंत्रित करते हैं: साइज़, बॉर्डर रेडियस, शैडो की दूरी, उनकी तीव्रता और ब्लर। चार आकार मोड — flat, concave, convex और pressed — आंतरिक ग्रेडिएंट और शैडो दिशा को बदल देते हैं, और एक लाइट-सोर्स पिकर हाइलाइट को चारों कोनों में से किसी पर भी ले जाता है ताकि एलिमेंट आपके डिज़ाइन की लाइटिंग से मेल खाए।
डिफ़ॉल्ट रूप से लाइट और डार्क शैडो रंग बेस कलर से निकाले जाते हैं, लेकिन एक मैनुअल मोड आपको दोनों खुद सेट करने देता है। जनरेट किया गया CSS — background, radius और dual box-shadow — बस एक क्लिक दूर है।
न्यूमॉर्फिज़्म जेनरेटर का उपयोग कैसे करें
- बेस कलर चुनें — यह एलिमेंट और उसके पीछे के कैनवास दोनों पर लागू होता है।
- एक आकार चुनें: flat, concave, convex या pressed।
- हाइलाइट कहां गिरे यह नियंत्रित करने के लिए लाइट सोर्स कोना सेट करें।
- स्लाइडर से साइज़, बॉर्डर रेडियस, दूरी, तीव्रता और ब्लर ट्यून करें।
- अगर आप निकाले गए लाइट और डार्क टोन को ओवरराइड करना चाहते हैं, तो मैनुअल शैडो कलर सक्षम करें।
- CSS कॉपी करके अपने एलिमेंट पर पेस्ट करें।