هل يمكنني تطبيق ظلال متعددة الطبقات؟

نعم — أضف ما تشاء من الظلال، لكل منها إزاحته الخاصة، وتمويهه، وانتشاره، ولونه.

هل يدعم ظلال "الحصر" (inset)؟

نعم — قم بتبديل خيار "inset" لجعل الظل يظهر داخل العنصر بدلاً من خارجه.

نعم — لأنماط الظل المفردة الشائعة. تتطلب تراكبات الظلال المتعددة استخدام CSS مخصصًا (custom CSS).

نعم — مجاني بالكامل، لا يتطلب التسجيل.

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

مولد box-shadow CSS مجاني. صمم الظلال باستخدام منزلقات للإزاحة، التمويه، الانتشار، اللون والعتامة. طبقات ظلال متعددة. انسخ CSS فوراً.

Runs in your browser

Offset X0px

Offset Y10px

Blur30px

Spread-10px

Opacity40%

Color

box-shadow: 0px 10px 30px -10px rgba(59, 130, 246, 0.40);

ملاحظة المحرر

هذا الفصل المعمّق متاح حاليًا باللغة الإنجليزية فقط. أداة التحويل أعلاه تعمل بلغتك؛ أما المقال التفصيلي الطويل فلم تتم ترجمته بعد.

الأسئلة المتكررة

›Can I layer multiple shadows?

Yes — add as many shadows as you want, each with its own offset, blur, spread and color.

›Does it support inset shadows?

Yes — toggle 'inset' to make a shadow appear inside the element instead of outside.

›Does it output Tailwind?

Yes — for common single-shadow patterns. Multi-shadow stacks need custom CSS.

›Is the generator free?

Yes — fully free, no signup.

أدوات ذات صلة