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

تضيف خاصية CSS box-shadow عمقا إلى البطاقات والأزرار والصور، لكن كتابة القيم يدويا أشبه بالتخمين. يتيح لك مولد الظلال هذا تصميم الظل بأشرطة التمرير ورؤيته على صندوق معاينة مباشرة، ثم نسخ كود نظيف بصيغة CSS أو SCSS أو كإدخال في إعدادات Tailwind.

طريقة إنشاء ظل

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

صيغة box-shadow

box-shadow: [inset] offset-x offset-y blur spread color;

مثلا box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15); يعطي ظلا ناعما أسفل العنصر مباشرة. يمكن الجمع بين عدة ظلال تفصل بينها فواصل، ويُرسم الأول في الأعلى.

وصفات للظلال

• بطاقة ناعمة: إزاحة صغيرة وتمويه كبير وشفافية منخفضة، مثل 0 4px 12px بلون أسود بنسبة 10 إلى 15 بالمئة.
• عمق واقعي: طبقتان، واحدة أغمق ومحكمة قرب العنصر وأخرى واسعة وخفيفة جدا أبعد منه.
• زر مضغوط: ظل داخلي عند الحافة العلوية.
• توهج أو نيون: إزاحة صفرية وتمويه كبير وظل بلون زاه؛ ضع لونين فوق بعضهما لشدة أكبر.
• ظل مركّز: الانتشار السالب يجعل الظل أضيق من الصندوق فلا يظهر إلا في الأسفل.

نصائح

• حافظ على اتجاه ضوء واحد في الواجهة كلها، عادة من الأعلى، لتتجه كل الظلال في الاتجاه نفسه.
• لوّن الظلال بدرجة داكنة من لون الخلفية بدلا من الأسود الخالص لمظهر أكثر طبيعية.
• انتبه للأداء: التمويه الكبير جدا على عناصر كثيرة قد يبطئ التمرير في الهواتف القديمة.

اجمع الظلال مع الزوايا المستديرة من مولد border-radius والخلفيات من مولد تدرجات CSS.