مولّد ظل الصندوق CSS (Box Shadow)

ما هو مولّد ظل الصندوق CSS؟

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

كيفية استخدام مولّد ظل الصندوق CSS

1. اختر إعداداً مسبقاً (Soft أو Layered أو Hard أو Glow أو Inner أو Ring) أو ابدأ بالظل الافتراضي.
2. حدّد طبقة واضبط الإزاحة الأفقية والإزاحة الرأسية والتمويه والانتشار ولون الظل والشفافية؛ وفعّل Inset للظل الداخلي.
3. استخدم إضافة طبقة / حذف طبقة لبناء ظلال متعددة الطبقات؛ وتُسرد الطبقات بترتيب الرسم.
4. غيّر الخلفية ولون العنصر ونصف القطر ضمن إعدادات المعاينة لتقييم الظل في سياقه.
5. انسخ كود CSS المولَّد.

مثال

One layer: x 10px, y -5px, blur 20px, spread 3px, color #3b82f6, opacity 1, Inset on

box-shadow: inset 10px -5px 20px 3px #3b82f6;

متى تستخدم مولّد ظل الصندوق CSS

استخدمه لتصميم ارتفاع البطاقات أو حلقات التركيز أو التوهج أو الظلال الداخلية لأي عنصر HTML. أما ظلال النص فاستخدم مولّد ظل النص، وللظلال التي تتبع شكل صورة PNG شفافة أو عنصر مقصوص استخدم filter: drop-shadow() (مولّد فلاتر CSS)، لأن box-shadow يتبع دائماً صندوق حدود العنصر.

كيف يعمل مولّد ظل الصندوق CSS

تصبح كل طبقة قيمة box-shadow واحدة بالترتيب [inset] x y blur spread color. تُكتب الأطوال بوحدة px (والصفر 0 بلا وحدة). تُضرب شفافية المنزلق في ألفا اللون نفسه: الألوان المعتمة تماماً تُكتب بصيغة hex والشفافة بصيغة rgba(r, g, b, a). تُفصل الطبقات المتعددة بفواصل، واحدة في كل سطر؛ وتُرسم الطبقة الأولى في الأعلى. لا يمكن أن يكون التمويه سالباً أما الانتشار فيمكن.

حالات الاستخدام الشائعة

• ✓ ارتفاع متعدد الطبقات بنمط Material للبطاقات والنوافذ المنبثقة
• ✓ حلقات تركيز سهلة الوصول بظل انتشار فقط (0 0 0 3px)
• ✓ ظلال داخلية للأزرار المضغوطة وحقول الإدخال
• ✓ توهج ملون حول أزرار الدعوة إلى الإجراء
• ✓ ظلال صلبة بإزاحة لتصميمات neo-brutalist

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

الخطوات التالية المقترحة

استكشف المزيد من الفئات