DukoTools

CSS Box Shadow Generator

جديد

أنشئ ظلال صندوق CSS متعددة الطبقات مع معاينة مباشرة و12 إعدادًا مسبقًا ومكافئات Tailwind.

مجاني للأبد
بدون تسجيل
لا يخزن ملفات

الإعدادات المسبقة

box-shadow: 0px 4px 16px 0px #00000026;

أدوات مشابهة

CSS Border Radius Generator

developer

Generate CSS border-radius with simple or elliptical per-corner control and shape presets.

Try it free

CSS Gradient Generator

developer

Build linear, radial, and conic gradients with presets and copy-ready CSS output.

Try it free

تضمين هذه الأداة

أضف هذه الأداة إلى موقعك أو مدونتك باستخدام iframe.

<iframe src="https://dukotools.com/tools/box-shadow-generator?embed=1" width="100%" height="600" frameborder="0" allow="clipboard-write" loading="lazy" title="box-shadow-generator tool"></iframe>

About CSS Box Shadow Generator

يوفر CSS Box Shadow Generator للمصممين والمطورين محررًا مرئيًا لـ CSS box-shadow مع معاينة في الوقت الفعلي. تعرض لوحة المعاينة بطاقة بيضاء على خلفية رمادية مع تطبيق الظل الحالي، ويتم تحديثها على الفور مع تغير أي عنصر تحكم. خمسة منزلقات تتحكم في الإزاحة الأفقية، والإزاحة الرأسية، ونصف قطر التمويه، ونصف قطر الانتشار، وعتامة الظل. يقوم التبديل الداخلي بالتبديل بين الظلال المسقطة والظلال الداخلية. يعد النظام متعدد الطبقات هو الميزة الأساسية: يقوم زر Add Shadow بتجميع ما يصل إلى 5 طبقات ظل مستقلة مع عناصر تحكم فردية. يتم عرض اثني عشر إعدادًا مسبقًا مصممة مسبقًا كصور مصغرة للبطاقة حتى تتمكن من رؤية التأثير قبل النقر. يعرض قسم الإخراج القيمة الكاملة لخاصية box-shadow، وقاعدة CSS الكاملة الجاهزة للصق، والفئة المكافئة لـ Tailwind في حالة وجودها.

الميزات الرئيسية

  • معاينة في الوقت الحقيقي

    يتم تحديث معاينة البطاقة المباشرة فورًا مع تغير أي عنصر تحكم في الظل.

  • خمسة ضوابط المنزلق

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

  • ظلال متعددة الطبقات

    قم بتجميع ما يصل إلى 5 طبقات ظل مستقلة مركبة في المعاينة.

  • تبديل الظل الداخلي

    للتبديل بين الظلال المسقطة الخارجية والظلال الداخلية الداخلية.

  • 12 إعدادات مسبقة للتصميم

    تظهر الإعدادات المسبقة المصممة مسبقًا كصور مصغرة مع تطبيق الظل بالفعل للتحميل الفوري.

  • إخراج فئة الرياح الخلفية

    يعرض مكافئ Tailwind CSS عند الاقتضاء.

كيفية الاستخدام

  1. 1

    اضبط أشرطة التمرير

    اسحب منزلقات الإزاحة والتمويه والانتشار لتشكيل الظل. شاهد تحديث المعاينة في الوقت الحقيقي.

  2. 2

    اختر لونًا

    انقر فوق منتقي الألوان لاختيار لون الظل واستخدم شريط تمرير العتامة للتحكم في الشفافية.

  3. 3

    تبديل أقحم (اختياري)

    قم بتمكين Inset لإنشاء تأثير ظل داخلي مضغوط أو مزخرف.

  4. 4

    إضافة المزيد من الطبقات (اختياري)

    انقر فوق Add Shadow لتكديس ما يصل إلى 5 طبقات للحصول على تأثيرات ظل مركبة معقدة.

  5. 5

    أو قم بتحميل إعداد مسبق

    انقر فوق أي صورة مصغرة معدة مسبقًا لتحميل تكوينها في المحرر.

  6. 6

    انسخ ملف CSS

    انقر فوق "نسخ" للحصول على قاعدة CSS الكاملة أو قيمة ظل المربع فقط.

حالات الاستخدام في العالم الحقيقي

تصميم المكونات

يستخدم المصمم المحرر متعدد الطبقات لإنشاء ظل مكون البطاقة بطبقة توهج ملونة دقيقة بالإضافة إلى طبقة ظل مسقطة قياسية.

واجهة المستخدم نيومورفيك

يقوم المطور بإنشاء لوحة معلومات نيومورفيك باستخدام الإعداد المسبق Neumorphic Light وضبط الألوان لتتناسب مع الخلفية.

تصميم الزر

يستخدم مصمم واجهة المستخدم الإعداد المسبق المضغوط لإنشاء ظل داخلي لحالة الزر النشطة التي توفر ردود فعل ملموسة.

الأسئلة المتداولة

Related Free Tools

Explore these tools that work great alongside CSS Box Shadow Generator:

CSS Border Radius Generator

Generate CSS border-radius with simple or elliptical per-corner control and shape presets.

CSS Gradient Generator

Build linear, radial, and conic gradients with presets and copy-ready CSS output.