صمّم أسطح واجهة نيومورفية ناعمة وبارزة بظلال مزدوجة وانسخ كود CSS.

معاينة
CSS

تطابق خلفية اللوحة لون العنصر — وهذا ما يمنح المظهر النيومورفي الناعم والبارز فعاليته.

اللون الأساسي
يُستخدم للعنصر وخلفيته معًا.
الشكل
مصدر الضوء
200px
50px
20px
15%
60px

افتراضيًا تُشتق الظلال الفاتحة والداكنة من اللون الأساسي. فعّل الخيار لتحديدها بنفسك.


حول مولّد Neumorphism

مولّد Neumorphism يصمّم مظهر "الواجهة الناعمة" المبثوق الناعم: عنصر يبدو مضغوطاً للخارج — أو للداخل — من السطح خلفه. اختر لوناً أساسياً واحداً وتشتق الأداة كل شيء آخر، لأن التأثير يعمل فقط عندما يتشارك العنصر والخلفية نفس اللون ويأتي العمق بالكامل من ظلين متعاكسين.

تتحكم أشرطة التمرير في الهندسة: الحجم، نصف قطر الحواف، مسافة الظلال، شدتها وطمسها. أربعة أوضاع شكل — flat، concave، convex وpressed — تبدّل التدرج الداخلي واتجاه الظل، ومنتقي مصدر الضوء يحرّك الإبراز إلى أي من الزوايا الأربع بحيث يطابق العنصر إضاءة تصميمك.

افتراضياً تُحسَب ألوان الظل الفاتح والداكن من اللون الأساسي، لكن الوضع اليدوي يتيح لك ضبط كليهما بنفسك. CSS المُولَّد — background ونصف القطر والظل المزدوج — على بعد نقرة واحدة.

كيفية استخدام مولّد Neumorphism

  1. اختر اللون الأساسي — يُطبَّق على العنصر والقماش خلفه معاً.
  2. اختر شكلاً: flat أو concave أو convex أو pressed.
  3. اضبط زاوية مصدر الضوء للتحكم في مكان سقوط الإبراز.
  4. اضبط الحجم ونصف قطر الحواف والمسافة والشدة والطمس باستخدام أشرطة التمرير.
  5. فعّل ألوان الظل اليدوية إذا أردت تجاوز الدرجات الفاتحة والداكنة المشتقة.
  6. انسخ CSS والصقه على عنصرك.

الأسئلة الشائعة

يعتمد Neumorphism على مشاركة العنصر لونه الأساسي مع السطح خلفه. ضع العنصر على حاوية بنفس اللون الأساسي — على خلفية بيضاء أو متباينة تُقرأ الظلال المزدوجة كتوهّج، لا كعمق.

يبقي flat السطح مسطحاً؛ يضيف convex تدرجاً يجعله ينتفخ للخارج؛ يجعله concave يغور للداخل؛ ويعكس pressed الظلال تماماً بحيث يبدو العنصر غارقاً في السطح — حالة الزر النشط الكلاسيكية.

ظلان في زوايا متقابلة: ظل داكن يحاكي التظليل وظل فاتح يحاكي الإبراز، كلاهما مشتق من اللون الأساسي. تُزيح المسافة بينهما، ويلطّفهما الطمس، وتتحكم الشدة في مدى انحرافهما عن الأساس.

استخدمه بحذر. الأسلوب منخفض التباين بطبيعته، لذا اقرنه بنص واضح القراءة، وحالات تركيز قوية، ونسب تباين كافية للعناصر التفاعلية — احتفظ بالمظهر الناعم للأسطح الزخرفية حيثما أمكن.

نعم، مجاني ويعمل بالكامل في متصفحك. اضبط وعاين وانسخ CSS بقدر ما تشاء دون حساب.

شارك هذا

عمليات البحث الشائعة
مولّد neumorphism css مولّد ظلال soft ui neumorphic box shadow css مولّد neumorphism box shadow مولّد ظلال ناعمة css أداة تصميم neumorphism مولّد inset shadow css css dual box shadow
هل تحتاج إلى مساعدة؟
هل واجهت مشكلة في هذه الأداة؟ أخبر فريقنا.
الإبلاغ عن مشكلة

أضف هذه الأداة المجانية إلى موقعك الخاص — انسخ والصق الكود أدناه.