CSS neumorphism जनरेटर
बैकग्राउंड रंग, दूरी, ब्लर और तीव्रता सेट करके neumorphism इफ़ेक्ट (उभार जैसा दिखने वाला नरम शैडो) बनाएँ और उसका CSS कोड पाएँ, लाइव प्रीव्यू के साथ। पूरी गणना आपके ब्राउज़र में ही होती है।
यह कैसे काम करता है
Neumorphism ऐसा आभास देता है कि कोई एलिमेंट अपने बैकग्राउंड से हल्का उभरा हुआ या धँसा हुआ है। इसके लिए बैकग्राउंड जैसे ही रंग की दो विपरीत शैडो इस्तेमाल होती हैं: एक ऊपर-बाईं ओर हल्की, दूसरी नीचे-दाईं ओर गहरी। यह टूल चुने गए बैकग्राउंड रंग से ये दोनों शेड निकालता है और लाइव उनसे मेल खाती box-shadow प्रॉपर्टी तैयार करता है।
दोनों शैडो का आधार रंग एक ही क्यों होना चाहिए?
Neumorphism इफ़ेक्ट एक ही रंग (बैकग्राउंड) की चमक में बदलाव पर टिका होता है, सामान्य शैडो की तरह विपरीत रंगों पर नहीं; रंगों की यही नज़दीकी इस शैली का विशिष्ट नरम, "ढला हुआ" एहसास देती है, पारंपरिक ड्रॉप शैडो जैसा नहीं।
इस इफ़ेक्ट का इस्तेमाल किन एलिमेंट पर करें?
Neumorphism बटन, कार्ड, फ़ॉर्म फ़ील्ड या आइकन पर हल्के या गहरे सादे बैकग्राउंड के साथ अच्छा लगता है; लेकिन इमेज या ग्रेडिएंट वाले बैकग्राउंड पर इसे पढ़ना मुश्किल होता है, और कंट्रास्ट की कमी से कभी-कभी एक्सेसिबिलिटी की समस्याएँ भी आती हैं, इसलिए बड़े पैमाने पर इस्तेमाल से पहले इसे टेस्ट कर लें।
कोई डेटा किसी सर्वर को नहीं भेजा जाता: शैडो की रचना पूरी तरह आपके ब्राउज़र में होती है।