أداة مجانية
CSS Box Shadow Generator
بناء ظلال CSS متعددة الطبقات بصريًا مع معاينة مباشرة. اضبط الإزاحات والتمويه والانتشار واللون والشفافية — ثم انسخ قيمة CSS جاهزة للاستخدام.
CSS Box Shadow Generator
ظل 1
px
px
px
px
20%
معاينة مباشرة
مخرجات CSS
box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.20);ما هو CSS box-shadow؟
تضيف خاصية CSS box-shadow تأثيرات ظل واحد أو أكثر إلى إطار العنصر. يتم تعريف كل ظل بإزاحته الأفقية والعمودية ونصف قطر التمويه ونصف قطر الانتشار واللون وكلمة inset اختيارية تحرك الظل داخل العنصر.
ظلال متعددة الطبقات
يمكنك تكديس طبقات ظل متعددة لتحقيق تأثيرات العمق أو تأثيرات التوهج أو الحدود المحاكاة. يتم تقديم الطبقات من الخلف للأمام، لذا يظهر الظل الأول في القائمة في الأعلى.
كيفية الاستخدام
- انقر على 'إضافة ظل' لإنشاء طبقة ظل.
- اضبط أشرطة تمرير الإزاحة والتمويه والانتشار واللون والشفافية.
- قم بتبديل 'داخلي' لإنشاء ظل داخلي.
- أضف المزيد من الطبقات لبناء تأثيرات معقدة.
- انسخ القيمة أو الإعلان الكامل إلى الحافظة.
بيانك تبقى في متصفحك — لا يتم إرسال أي بيانات إلى أي خادم.
الأسئلة الشائعة
- ما الفرق بين التمويه والانتشار؟
- يتحكم نصف قطر التمويه في مدى نعومة حواف الظل — القيمة الأعلى تنشئ ظلًا أكثر انتشارًا. يوسع نصف قطر الانتشار أو يضغط حجم الظل خارج مربع محيط العنصر، دون التأثير على النعومة.
- ماذا يفعل الكلمة الأساسية inset؟
- يحرك Inset الظل داخل العنصر بدلاً من خارجه. هذا مفيد لإنشاء تأثيرات واجهة مستخدم مضغوطة أو غاطسة.
- هل يمكنني استخدام ظلال متعددة؟
- نعم. يقبل CSS box-shadow قائمة مفصولة بفواصل من تعريفات الظل. كل طبقة مستقلة ويتم دمجها من الخلف للأمام.
- هل المخرجات متوافقة عبر المتصفحات؟
- تتمتع خاصية box-shadow بدعم كامل في جميع المتصفحات الحديثة بدون بادئات البائع. لا توجد حاجة إلى -webkit- أو بادئة -moz-.