Stax

مولد CSS Box Shadow

توليد CSS box-shadow بصرياً مع معاينة مباشرة.

Horizontal (X)4px
Vertical (Y)4px
Blur radius10px
Spread radius0px
Opacity25%
Color
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25);

ما هو مولّد box-shadow؟

أداة بصرية لإنشاء ظلال CSS احترافية. اضبط شرائح x، y، blur، spread، color - ترى الظل فوراً وتنسخ كود CSS. أساسية لمصممي UI لإضافة عمق للأزرار، البطاقات، النوافذ المنبثقة.

أنماط الظلال

  1. Material Design - ظل خفيف ناعم
  2. Apple HIG - ظلين مدمجين
  3. Neumorphism - ظل + ضوء داخلي
  4. Long shadow - ظل قطري طويل
  5. Glow - ظل ملون لتأثير توهج

نصائح للظلال الواقعية

  • استخدم ظلين أو ثلاثة (واحد قريب، آخر بعيد)
  • الشفافية 0.05-0.15 (ليس أسود صلب)
  • blur أكبر = ظل أبعد عن السطح
  • y > x للظلال الطبيعية (الجاذبية)
  • لون الظل ليس أسود فقط - استخدم HSL داكن لخلفيتك

outset vs inset

outset (افتراضي): ظل خارج العنصر للأمام. inset: ظل داخل العنصر للخلف. 'inset 0 2px 4px rgba(0,0,0,0.1)' = حقل غائر. مفيد للأزرار المضغوطة، حقول النماذج، neumorphism. اخلط outset و inset لأنماط متطورة.

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

ما هو box-shadow؟
خاصية CSS تضيف ظلاً حول العناصر. الصيغة: 'box-shadow: x y blur spread color'. x,y: إزاحة الظل. blur: ضبابية الحواف. spread: حجم الظل. مثال: 'box-shadow: 0 4px 6px rgba(0,0,0,0.1)' = ظل ناعم خفيف للأسفل.
كيف أصنع ظلاً واقعياً؟
استخدم ظلين: واحد قريب وحاد، آخر بعيد وناعم. مثال: '0 1px 2px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.05)'. لون الظل ليس أسود فقط - استخدم لون مكمل للخلفية بشفافية. Material Design و Apple HIG يستخدمان ظلين أو ثلاثة.
ما الفرق بين outset وinset؟
outset (افتراضي): الظل خارج العنصر. inset: الظل داخل العنصر (مثل حقل غائر). 'box-shadow: inset 0 2px 4px rgba(0,0,0,0.1)' = حقل غائر للأزرار المضغوطة. لـ neumorphism، اخلط outset وinset.
هل box-shadow يبطئ الموقع؟
ظل واحد بسيط: لا تأثير. عدة ظلال على عناصر كثيرة (ملايين بكسل): قد يبطئ التمرير. حلول: استخدم will-change، transform بدلاً من box-shadow في الأنيميشن، أو احفظ الظل كصورة. اختبر الأداء على موبايل قديم.

أدوات ذات صلة