न्यूमॉर्फिज़्म CSS जेनरेटर

बेस रंग से निकली हल्की और गहरी शैडो, flat, concave, convex या pressed आकार और चार प्रकाश दिशाओं के साथ सॉफ़्ट UI (न्यूमॉर्फिज़्म) CSS बनाएं।

न्यूमॉर्फिज़्म सेटिंग्स

मूल रंग

आकृति

प्रकाश स्रोत

दूरीpx

धुंधलापनpx

तीव्रता

त्रिज्याpx

आकारpx

#ffffff#b0b0b0

हल्की और गहरी छाया मूल रंग से बनती है: तीव्रता के अनुसार उसकी OKLCH लाइटनेस बढ़ाई और घटाई जाती है। पेज बैकग्राउंड के लिए भी यही रंग रखें।

प्रीव्यू

CSS कोड

border-radius: 50px;
background: #e0e0e0;
box-shadow:
  20px 20px 60px #b0b0b0,
  -20px -20px 60px #ffffff;

न्यूमॉर्फिज़्म जेनरेटर क्या है?

यह सॉफ़्ट-UI लुक बनाता है जिसमें एलिमेंट पेज से उभरा हुआ (या उसमें दबा हुआ) लगता है। यह आपके बेस रंग से एक हल्का और एक गहरा शैडो रंग निकालता है और उन्हें दो विपरीत box-shadow के रूप में जोड़ता है, concave और convex सतहों के लिए वैकल्पिक ग्रेडिएंट फ़िल के साथ।

न्यूमॉर्फिज़्म जेनरेटर का उपयोग कैसे करें

Base color डालें (पेज बैकग्राउंड के लिए भी वही रंग इस्तेमाल करें)।
Shape चुनें: Flat, Concave, Convex या Pressed।
Light source की दिशा चुनें।
Distance, Blur, Intensity, Radius और प्रीव्यू Size एडजस्ट करें।
CSS कोड कॉपी करें।

उदाहरण

इनपुट

Base #e0e0e0, flat, light from top left, distance 20px, blur 60px, intensity 0.15, radius 50px

आउटपुट

border-radius: 50px;
background: #e0e0e0;
box-shadow:
  20px 20px 60px #b0b0b0,
  -20px -20px 60px #ffffff;

न्यूमॉर्फिज़्म जेनरेटर का उपयोग कब करें

इसे चंचल डैशबोर्ड, स्मार्ट-होम या म्यूज़िक ऐप कंट्रोल और पोर्टफ़ोलियो के लिए इस्तेमाल करें। न्यूमॉर्फिज़्म में स्वभाव से कम कंट्रास्ट होता है, इसलिए महत्वपूर्ण बटन या फ़ॉर्म फ़ील्ड के लिए केवल इस पर निर्भर न रहें; एक्सेसिबिलिटी के लिए साफ़ लेबल, आइकन या फ़ोकस रिंग जोड़ें।

न्यूमॉर्फिज़्म जेनरेटर कैसे काम करता है

हल्के और गहरे शैडो रंग OKLCH में निकाले जाते हैं: बेस रंग की लाइटनेस को intensity के अनुसार बढ़ाया और घटाया जाता है, जबकि hue और chroma बने रहते हैं (sRGB में gamut-map किए हुए), इसलिए यह रंगीन और गहरे बेस पर भी काम करता है। गहरी शैडो प्रकाश स्रोत से distance जितना दूर और हल्की शैडो उसकी ओर ऑफ़सेट होती है, दोनों में एक जैसा ब्लर। Pressed दो inset शैडो इस्तेमाल करता है। Concave और convex एक linear-gradient जोड़ते हैं जिसका एंगल प्रकाश दिशा के अनुसार होता है, और रंग intensity के एक तिहाई हल्के और गहरे होते हैं।