مولّد الظل الصندوقي

ما هي هذه الأداة؟

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

تحوّل هذه الأداة العملية إلى تلاعب مباشر: اسحب شريط التمرير، وراقب تغيّر الظل مباشرة على صندوق المعاينة الحي، وانسخ كود CSS الدقيق بمجرد أن يبدو مناسبًا. منتقي الألوان مع شريط الشفافية يولّدان قيمة rgba() صحيحة تلقائيًا، لأن الظلال الشفافة تبدو عمومًا أفضل من الظلال المعتمة تمامًا.

لماذا تستخدمها؟

• معاينة حية تتحدث فورًا مع أي تعديل — شاهد الظل بدقة قبل الالتزام بالكود.
• تحكم كامل في الإزاحة الأفقية والعمودية والتمويه والانتشار واللون والشفافية في مكان واحد.
• نقرة واحدة تضيف خاصية inset للحصول على مظهر غائر بدلًا من ظل عائم.
• يُخرج كود CSS جاهزًا للّصق مع تحويل اللون تلقائيًا إلى rgba() بالشفافية التي اخترتها.
• يعمل بالكامل داخل متصفحك — لا يُرفع أي شيء تضبطه إلى أي مكان.
• مجاني، بدون تسجيل، ويعمل على الجوال.

كيفية الاستخدام

1. اضبط الإزاحة الأفقية والعمودية لتحديد موضع الظل — القيم الموجبة تدفعه لليمين/الأسفل، والقيم السالبة تدفعه لليسار/الأعلى.
2. زِد نصف قطر التمويه لتنعيم حافة الظل؛ زِد الانتشار لجعل الظل أكبر من العنصر نفسه.
3. اختر لونًا واضبط الشفافية — معظم الظلال الواقعية تستخدم شفافية 15–40% بدلًا من الأسود الصلب.
4. فعّل خيار 'inset' إذا أردت أن يظهر الظل داخل حدود العنصر بدلًا من خلفه.
5. انسخ كود CSS الناتج والصقه في ملف التنسيق الخاص بك.

مثال

الإدخال

الإزاحة: 0px، 10px · التمويه: 20px · الانتشار: 0px · اللون: أسود بشفافية 35%

الناتج

box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.35);

ظل ناعم مباشرة أسفل العنصر بدون إزاحة أفقية — من أكثر أنماط ظلال البطاقات والأزرار شيوعًا.

ظل واحد مقابل ظلال متعددة الطبقات

تبني هذه الأداة طبقة ظل واحدة، وهي تغطي الغالبية العظمى من الاستخدامات الواقعية — الأزرار والبطاقات والنوافذ المنبثقة والقوائم المنسدلة تستخدم في الغالب ظلًا واحدًا. تدعم CSS ظلالًا متعددة مفصولة بفواصل على نفس العنصر لتأثيرات عمق أكثر تفصيلًا (مثل ظل ضيق وداكن فوق ظل ناعم وواسع)، لكن هذا تحسين يمكنك إضافته يدويًا: أنشئ ظلًا واحدًا هنا، ثم كرّر السطر واضبط مجموعة القيم الثانية واجمعهما بفاصلة.

أنماط شائعة لخاصية box-shadow

• رفعة بطاقة خفيفة: إزاحة صغيرة (0–4px)، تمويه معتدل (8–16px)، أسود بشفافية 10–20%.
• نافذة منبثقة/قائمة مرتفعة: إزاحة وتمويه أكبر (4–10px و20–30px)، شفافية 20–35% لإحساس أقوى بالعوم.
• زر مضغوط/غائر: فعّل inset، واستخدم إزاحة صغيرة بإحساس سلبي وتمويهًا معتدلًا بحيث يبدو الظل كغائر وليس كرفعة.
• توهج ملوّن: اختر لون علامتك التجارية بدلًا من الأسود، ارفع الشفافية إلى 40–60%، وزد الانتشار قليلًا لتأثير توهج ناعم حول الأزرار.
• ظل حاد/صلب: اضبط التمويه على 0 والانتشار على 0 للحصول على مخطط صلب ومُزاح بدلًا من ظل ناعم.

الدمج مع الزوايا المستديرة

تُستخدم الظلال والزوايا المستديرة معًا باستمرار — البطاقات والأزرار والنوافذ المنبثقة تجمع بينهما تقريبًا دائمًا. استخدم مولّد نصف قطر الحدود لتدوير زوايا نفس العنصر، ثم طبّق كلا التصريحين الناتجين معًا.

→ مولّد نصف قطر الحدود

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