مولد ظل الصندوق CSS — مجاني على الإنترنت
بناء ظلال CSS بصريًا مع ضبط الإزاحة والتمويه والانتشار واللون. انسخ الكود بنقرة واحدة.
Who uses the مولد ظل الصندوق CSS?
- مطوّرو الواجهة الذين ينشئون ظلال بطاقات وأزرار تطابق مواصفات نظام التصميم لديهم.
- متعلمو CSS الذين يستكشفون خصائص الظل من خلال واجهة مرئية بردود فعل فورية.
- المصممون الذين ينشئون ويختبرون تأثيرات الظل للنماذج الأولية قبل تسليمها للمطورين.
How the مولد ظل الصندوق CSS works
اضبط أشرطة تمرير الإزاحة الأفقية X، والإزاحة الرأسية Y، ونصف قطر التمويه، ونصف قطر الانتشار لتشكيل ظلك.
انقر على عينة اللون لاختيار لون الظل، واستخدم شريط تمرير الشفافية بجانبه.
فعّل Inset للحصول على تأثير ظل داخلي.
انسخ CSS من لوحة ناتج الكود.
Tips & tricks
- تُنشئ هذه الأداة طبقة ظل واحدة — للحصول على تأثير متعدد الطبقات (مثل ارتفاع Material Design)، أنشئ كل طبقة هنا بشكل منفصل وادمجها بفواصل يدويًا.
- الانتشار السالب مع تمويه أكبر يُنشئ ظلًا ناعمًا ومنتشرًا يبدو أكثر «تحليقًا» من ظل بانتشار موجب ضيق.
- تعمل الظلال الداخلية بشكل جيد لحالات الزر المضغوط — جرّب تمويهًا صغيرًا مع لون داكن منخفض الشفافية.
- يتحكم شريط تمرير الشفافية في قناة ألفا للون الظل، وليس في شفافية العنصر نفسه.
Frequently Asked Questions
ما صياغة CSS لـbox-shadow؟
box-shadow: [inset] إزاحة-X إزاحة-Y نصف-قطر-التمويه نصف-قطر-الانتشار اللون. مثال: box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1). تُفصل الظلال المتعددة بفواصل.
ماذا يفعل نصف قطر الانتشار؟
يوسّع نصف قطر الانتشار الظل أو يقلّصه قبل التمويه. القيم الموجبة تجعل الظل أكبر من العنصر؛ والقيم السالبة تقلّصه. انتشار -4px مع تمويه 8px يُنشئ ظلًا مركّزًا واتجاهيًا.
ما هو الظل الداخلي (inset)؟
تحديد خانة Inset يجعل الظل يظهر داخل حدود العنصر بدلًا من خارجها. تُنشئ الظلال الداخلية حالات زر مضغوط/غائر، وتأثيرات بطاقة مغروسة، وتوهجًا داخليًا.
هل يمكن لهذه الأداة إنشاء عدة طبقات ظل متراكبة، مثل ارتفاع Material Design؟
لا — تُنشئ هذه الأداة طبقة ظل واحدة في كل مرة. للحصول على تأثير متعدد الطبقات مثل ارتفاع Material Design (box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0px rgba(0,0,0,0.14), 0 1px 10px 0px rgba(0,0,0,0.12))، أنشئ كل طبقة هنا بشكل منفصل وادمج القيم المفصولة بفواصل يدويًا.
هل يؤثر box-shadow على التخطيط ويشغل مساحة؟
لا. على عكس margin أو padding، لا يؤثر box-shadow على التخطيط — العناصر ذات الظلال لا تدفع العناصر المجاورة بعيدًا. هذا يجعل من الآمن إضافة الظلال دون تعطيل تخطيط الصفحة.
Is my data safe when using the مولد ظل الصندوق CSS?
Completely safe. The مولد ظل الصندوق CSS processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the مولد ظل الصندوق CSS output in commercial projects?
Yes. The مولد ظل الصندوق CSS is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the مولد ظل الصندوق CSS follow official standards?
Yes. The مولد ظل الصندوق CSS is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.