هل هناك مشكلة في هذه الأداة؟
عن «CSS Box Shadow Generator Online»
تبني هذه الأداة قيم box-shadow CSS بصريًا باستخدام شرائط التمرير للإزاحة، والضبابية، والانتشار، واللون، والشفافية. ترى الظل يتحدث في الوقت الفعلي وتنسخ CSS المطابق بمجرد رضاك عنه.
تضيف ظلال الصندوق العمق، وتفصل العناصر عن الخلفية، وتشير إلى التفاعل (حالات hover، الحالات المضغوطة، العناصر المركزة). يمكن للظلال متعددة الطبقات محاكاة إعدادات الإضاءة المعقدة مثل ارتفاع Material Design أو التأثيرات neumorphic.
استخدمها للبطاقات والنوافذ المنبثقة والأزرار وأي عنصر واجهة مستخدم يحتاج إلى رفع بصري. يمكن للمولد إخراج box-shadow الكلاسيكي، وطبقات ظل متعددة، وتركيبات إزاحة/ضبابية حديثة.
كيف تستخدم هذه الأداة
كيف أُجمّع تعريف box-shadow CSS؟
الإزاحات
«X offset (px)» و «Y offset (px)» يحرّكان الظل أفقيًا (موجب = يمين) ورأسيًا (موجب = أسفل). افتراضي CSS بلا إزاحة؛ ظلال البطاقات الشائعة Y صغير مثل `4` و X قريب من 0.
التمويه واللون
«Blur (px)» يضبط النعومة — 0 حواف حادة، 10+ ضبابي. «Color» يقبل أي لون CSS بما فيه rgba/hex بقناة alpha. لظلال UI خفيفة استخدم `rgba(0,0,0,0.15)` وقيمة blur متوسطة.
اضغط «تشغيل»
الناتج حقل واحد `css` — `<x>px <y>px <blur>px <color>`. ألصقه قيمة لـ `box-shadow:`. لا يُولَّد spread ولا inset؛ التركيب يسمح بهما لكن الأداة تلتزم بصيغة الـ4-وسائط.
ظلال متعددة
كثيرًا ما تكدّس التصاميم 2-3 ظلال مفصولة بفواصل (واحد ناعم طويل + واحد قصير ضيق) لإضفاء عمق. ولّد كلًا منها بهذه الأداة ثم ادمجها يدويًا بفواصل داخل قيمة `box-shadow:` واحدة.