مولد ظل الصندوق CSS box-shadow

طريقة الاستخدام

1. أدخل الإزاحة الأفقية، الإزاحة الرأسية، التمويه، الانتشار، لون الظل (HEX) والشفافية.
2. تظهر النتيجة فورًا وتتحدّث مع كل تعديل.
3. انسخ النتيجة، أو انسخ رابطًا يحفظ القيم نفسها لمشاركتها.

طريقة الحساب

box-shadow: [inset] الإزاحة الأفقية الإزاحة الرأسية التمويه الانتشار rgba(أحمر, أخضر, أزرق, الشفافية ÷ 100). اللون يُحوَّل من HEX إلى قيم 0 إلى 255.

مثال

المدخلات: الإزاحة الأفقية = 0 px، الإزاحة الرأسية = 4 px، التمويه = 12 px، الانتشار = 0 px، لون الظل (HEX) = #000000. النتيجة: كود CSS: box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);.

#000000

box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);

الحدود والملاحظات

• يولّد طبقة ظل واحدة، ولإضافة طبقات افصل بين القيم بفاصلة في الكود.
• التمويه في CSS لا يقبل قيمة سالبة، أما الإزاحة والانتشار فيقبلانها.