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

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

CSS न्यूमॉर्फ़िज़्म जनरेटर सॉफ़्ट-UI (न्यूमॉर्फ़िज़्म) लुक गढ़ने का एक मुफ़्त विज़ुअल टूल है, जहाँ एक ही रंग की दो ऑफ़सेट छायाओं की मदद से तत्व सतह से उभरे हुए या उसमें दबे हुए दिखते हैं। यह उन UI डिज़ाइनरों और फ़्रंट-एंड डेवलपरों के लिए बनाया गया है जो जोड़ीदार box-shadow को हाथ से ट्यून किए बिना वह सूक्ष्म, स्पर्शनीय गहराई चाहते हैं। पिकर या हेक्स फ़ील्ड से बेस रंग सेट करें, आकार को फ़्लैट, कॉनकेव और कॉन्वेक्स के बीच बदलें, और दूरी (छायाएँ कितनी ऑफ़सेट होती हैं), तीव्रता (हल्के/गहरे कंट्रास्ट की मज़बूती), ब्लर (कोमलता) और रेडियस (कोनों का गोलापन) समायोजित करें। टूल आपके बेस रंग से एक हल्का हाइलाइट और एक गहरी छाया निकालता है और उन्हें जोड़ता है — कॉनकेव और कॉन्वेक्स आकारों के लिए वैकल्पिक रूप से एक सूक्ष्म ग्रेडिएंट जोड़ते हुए — एक ही CSS नियम में, जो मिलती-जुलती पृष्ठभूमि पर लाइव दिखाया जाता है और कॉपी करने योग्य कोड के रूप में निकलता है।

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

1. स्वैच से या #e0e5ec जैसा हेक्स मान टाइप करके अपनी सतह का बेस रंग चुनें।
2. एक आकार चुनें: उभरे पैनल के लिए फ़्लैट, दबे हुए गड्ढे के लिए कॉनकेव, या गुंबददार उभार के लिए कॉन्वेक्स।
3. दूरी सेट करें ताकि हल्की और गहरी छायाएँ और बाहर खिसकें और गहरा उभार मिले।
4. तीव्रता समायोजित करें ताकि हाइलाइट/छाया का कंट्रास्ट और तेज़ या और सूक्ष्म हो।
5. कोमल या तीखे किनारों के लिए ब्लर और कोनों को गोल करने के लिए रेडियस ट्यून करें।
6. लाइव प्रीव्यू जाँचें, फिर बनाए गए न्यूमॉर्फ़िज़्म CSS को अपनी स्टाइलशीट में कॉपी करें।

उदाहरण

रंग #e0e5ec, आकार फ़्लैट, दूरी 12, तीव्रता 15, ब्लर 24, रेडियस 20

border-radius: 20px;
background: #e0e5ec;
box-shadow: 12px 12px 24px #bec3c9, -12px -12px 24px #e5e9ef;

रंग #e0e5ec, आकार कॉनकेव, दूरी 8, तीव्रता 15, ब्लर 16, रेडियस 16

border-radius: 16px;
background: linear-gradient(145deg, #d0d5db, #e2e7ed);
box-shadow: 8px 8px 16px #bec3c9, -8px -8px 16px #e5e9ef;

रंग #3a3f47, आकार कॉन्वेक्स, दूरी 6, तीव्रता 20, ब्लर 12, रेडियस 12

border-radius: 12px;
background: linear-gradient(145deg, #484c54, #363b42);
box-shadow: 6px 6px 12px #2e3239, -6px -6px 12px #61656c;

अक्सर पूछे जाने वाले सवाल

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

न्यूमॉर्फ़िज़्म (या सॉफ़्ट UI) एक शैली है जिसमें तत्व एक ही रंग की दो ऑफ़सेट box-shadow — ऊपर-बाएँ एक हल्की और नीचे-दाएँ एक गहरी — का उपयोग करके एकल-रंग सतह से उभरे हुए या उसमें दबे हुए दिखते हैं। यह टूल दोनों छायाएँ आपके बेस रंग से निकालता है ताकि वे हमेशा सतह से मेल खाएँ।

फ़्लैट, कॉनकेव और कॉन्वेक्स में क्या अंतर है?

फ़्लैट सतह को एकल ठोस रंग में रखता है ताकि तत्व पृष्ठभूमि से ऊपर उठा दिखे। कॉनकेव एक सूक्ष्म ग्रेडिएंट जोड़ता है जो ऊपर-बाईं ओर गहरा होता जाता है, जिससे यह अंदर की ओर खोखला दिखता है। कॉन्वेक्स ग्रेडिएंट को पलट देता है ताकि केंद्र गुंबददार और उठा हुआ दिखे। हल्की और गहरी छायाएँ वही रहती हैं; केवल सतह का भराव बदलता है।

दूरी, तीव्रता, ब्लर और रेडियस कैसे काम करते हैं?

दूरी दोनों छायाओं का पिक्सेल ऑफ़सेट है — बड़े मान तत्व को सतह से और दूर धकेलते हैं। तीव्रता यह नियंत्रित करती है कि दोनों छाया रंग बेस रंग से कितने हल्के और गहरे हैं। ब्लर छाया के किनारों को कोमल करता है, और रेडियस कोनों को गोल करता है। इनमें से किसी को भी बदलते ही CSS लाइव अपडेट होता है।

पृष्ठभूमि के लिए मुझे कौन सा रंग उपयोग करना चाहिए?

न्यूमॉर्फ़िज़्म तभी सही दिखता है जब तत्व उसी बेस रंग की सतह पर बैठा हो — वही रंग पैरेंट या पेज पृष्ठभूमि पर लगाएँ। प्रीव्यू आपके बेस रंग को अपनी पृष्ठभूमि के रूप में उपयोग करता है ताकि कॉपी करने से पहले आप प्रभाव का सटीक आकलन कर सकें।

क्या मेरा डेटा कहीं अपलोड होता है?

नहीं। जनरेटर पूरी तरह आपके ब्राउज़र में JavaScript के साथ चलता है — आपका रंग और सेटिंग्स कभी किसी सर्वर पर नहीं भेजे जाते, इसलिए यह निजी रूप से और पेज लोड हो जाने के बाद ऑफ़लाइन भी काम करता है।