مولّد ظلال CSS (box-shadow)

ما الذي تفعله الأداة

يتيح لك مولّد الظلال تصميم ظلال CSS بالعين ثم نسخ تصريح box-shadow الجاهز. كدّس ما تحتاجه من طبقات، واضبط لكل طبقة الإزاحة والتمويه والانتشار واللون والعتامة، وحوّلها إلى ظل داخلي، فتتحدث المعاينة فورًا. يمكنك أيضًا لصق قيمة box-shadow موجودة لتعديلها بصريًا. كل شيء يعمل داخل متصفحك.

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

1. ابدأ من قالب جاهز أو احتفظ بالظل النموذجي.
2. اختر طبقة عبر أزرار طبقة، أو استخدم + إضافة طبقة لتكديس طبقة أخرى فوقها.
3. اسحب الإزاحة الأفقية والإزاحة الرأسية والتمويه والانتشار، واختر اللون، وخفّض العتامة لمظهر أنعم. فعّل ظل داخلي للحصول على ظل نحو الداخل.
4. اضبط لون الصندوق والخلفية ونصف قطر الزوايا في المعاينة لتطابق صفحتك. هذه الإعدادات تؤثر في المعاينة فقط.
5. انسخ الشيفرة من بطاقة CSS.

مربع CSS الظل في الأسفل قابل للتحرير: الصق ظلًا من ملف الأنماط أو أداة التصميم وستقرؤه عناصر التحكم. تُحوَّل الأطوال بوحدة rem أو em إلى px على أساس 16px.

مثال

.card {
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 12px 24px -6px rgb(30 64 175 / 0.25);
}

نصائح لظلال طبيعية

• عتامة منخفضة. الأسود بنسبة 5–25% يبدو واقعيًا؛ الظلال الداكنة المصمتة تبدو ثقيلة.
• الانتشار السالب يمنع التمويه الكبير من التسرب من الجانبين، وهي حيلة معظم ظلال “البطاقات”.
• لوّن الظل. الظل الذي يحمل قليلًا من لون الخلفية أو العلامة التجارية يبدو أغنى من الرمادي الصرف.
• ضوء من جهة واحدة. اجعل الإزاحة الرأسية موجبة في كل الطبقات لتتفق الظلال على اتجاه الضوء.
• الأداء. التمويه الكبير على عناصر كثيرة قد يبطئ التمرير في الهواتف الضعيفة؛ حرّك opacity أو transform بدلًا من الظل نفسه.