أنشئ ظلال الصناديق باستخدام CSS بشكل مرئي مع معاينة مباشرة. تحكم في الإزاحة، والضبابية، والانتشار، واللون، والطبقات المتعددة. انسخ CSS الجاهز للاستخدام فورًا.
box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.25);تُضيف خاصية CSS box-shadow تأثيرات الظل حول إطار العنصر. يُحدد الظل من خلال إزاحته الأفقية، وإزاحته الرأسية، ونصف قطر التمويه، ونصف قطر الانتشار، ولونه، بالإضافة إلى علامة inset اختيارية. يمكن تكديس عدة ظلال مفصولة بفواصل لإنشاء تأثيرات متعددة الطبقات، وتدعم جميع المتصفحات الحديثة هذه الخاصية دون الحاجة إلى بادئات خاصة بالبائعين.
اضبط أشرطة التمرير ومنتقي الألوان لتخصيص كل طبقة ظل. يتم تحديث مربع المعاينة تلقائيًا مع تغيير القيم. يمكنك إضافة طبقات ظل متعددة وإزالتها بشكل مستقل. عند الانتهاء، انقر على "نسخ" للحصول على قيمة CSS الكاملة box-shadow جاهزة للصقها في ملف أنماط CSS.
استخدم الإعدادات المسبقة كنقاط انطلاق للأنماط الشائعة: ظلال البطاقات لمكونات واجهة المستخدم، وظلال بارزة للنوافذ المنبثقة، وظلال ناعمة لإضفاء عمق خفيف، وظلال حادة لتصميم مسطح. يتيح خيار "الداخلي" إنشاء ظلال داخلية مفيدة لحالات الضغط على الأزرار وحقول الإدخال الداخلية.