منشئ ظل الصندوق CSS
صمّم ظل الصندوق (box-shadow) بصريًا — الإزاحات، التمويه، الانتشار، اللون، الشفافية وinset — مع معاينة حية.
816 مشاهدة
خاصية box-shadow
الصيغة: box-shadow: x y التمويه الانتشار اللون. تُحرّك الإزاحات الظل، ويُلطّف التمويه حوافّه، بينما الانتشار يُكبّره أو يُصغّره، وعادة ما يحمل اللون قيمة شفافية (مثل rgba(0,0,0,0.15)) لمزيد من الواقعية. أضف inset لرسم الظل داخل الصندوق. الظلال الناعمة ذات الشفافية المنخفضة وإزاحة y صغيرة تبدو الأكثر طبيعية.
الأسئلة الشائعة
ما الفرق بين التمويه والانتشار؟
التمويه يُلطّف حافة الظل دون تغيير حجمه؛ أمّا الانتشار فيوسّع الظل (أو يُصغّره مع القيم السالبة) في كل الاتجاهات قبل تطبيق التمويه.
كيف أحصل على ظل أنيق وعصري؟
اجعل x يساوي 0، وy صغيرًا (2-8px)، والتمويه سخيًا (10-30px)، والشفافية منخفضة (0.08-0.2). تركيب ظلين — واحد ضيق وآخر واسع — يضيف عمقًا.
أدوات مشابهة
منشئ تدرجات CSS
صمّم تدرجات CSS خطية ودائرية ومخروطية مع معاينة حية، وانسخ الكود مباشرة.
أنشئ
منشئ استدارة الحواف CSS
دوّر كل زاوية على حدة أو جميعها معًا، بوحدة px أو %، مع معاينة حية وكود CSS قابل للنسخ.
أنشئ
منشئ ظل النص CSS
صمّم ظل نص (text-shadow) بتحديد الإزاحة والتمويه واللون والشفافية — مع معاينة حية على نص تجريبي.
أنشئ
منشئ حدود CSS
صمّم حدًا بصريًا — السماكة، النمط (solid, dashed, dotted, double…)، اللون، ونصف القطر — مع معاينة حية.
أنشئ
الإبلاغ عن مشكلة
منشئ ظل الصندوق CSS