كيف أنشئ ظل صندوق CSS وأقوم بنسخ الكود؟

اضبط المنزلقات للإزاحة الأفقية والعمودية، التمويه، الانتشار، اللون والشفافية، مع مشاهدة المعاينة المباشرة. ثم اضغط نسخ في مخرج CSS. يمكنك أيضاً البدء من الإعدادات المسبقة مثل ناعم، توهج أو Material 8.

هل يمكنني تكديس عدة ظلال على عنصر واحد؟

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

كيف أصنع ظلاً داخلياً؟

اختر طبقة وفعّل ظل داخلي، أو حمّل الإعداد المسبق داخلي. سيتضمن المخرج عندها كلمة inset لتلك الطبقة.

هل يمكنني الحصول على صنف Tailwind بدلاً من CSS العادي؟

نعم. بالإضافة إلى إعلان CSS، تُخرج الأداة صنف قيمة عشوائية من Tailwind على الشكل shadow-[...]، مع استبدال المسافات بشرطات سفلية، جاهز للصقه في ترميزك.

هل هناك طريقة أسهل لضبط موضع الظل غير المنزلقات؟

نعم. اسحب مربع المعاينة لتحريك ظل الطبقة النشطة، واثبت على Shift للتحكم الدقيق. يمكنك أيضاً تغيير معاينة الخلفية ولون المربع لترى كيف يبدو الظل على تصميمك.

هل هو مجاني فعلًا؟

نعم. كل أداة مجانية الاستخدام، بدون حساب وبدون بطاقة ائتمان. العمل يجري على جهازك بدلاً من خوادمنا، وهذا ما يبقيها مجانية التشغيل.

هل يعمل على الجوال؟

نعم. يعمل في متصفحات الجوال الحديثة على iOS وأندرويد دون تثبيت أي شيء.

🎨

CSS مولد ظل الصندوق مجانًا

منشئ مرئي لـ box-shadow في CSS مع معاينة مباشرة، وتكديس متعدد الطبقات، ومنتقي ألوان، ومفتاح للظل الداخلي، ونسخ بنقرة واحدة. يتضمن إعدادات مسبقة لـ Material والنيومورفيزم والتوهج.

يعمل في المتصفح الخاص بكبلا اشتراك، بلا نوافذ منبثقةلا يلزم تسجيل الدخولمجاني للأبد

يعمل دون اتصال بعد التحميل

معاينة الخلفية

اسحب الصندوق لتحديد موضع ظل الطبقة النشطة - اضغط Shift لتحكم دقيق

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

الإعدادات المسبقة

لون المربع

نصف قطر الحافة (16px)

x (0px)

y (4px)

تمويه (12px)

انتشار (0px)

اللون

الشفافية (15%)

ظل داخلي

الاستخدامات الشائعة

ظلال بطاقة UIبناء ظلال بطاقة أنيقة للوحات المعلومات وشبكات المنتجات والوحات التحكم.
تأثيرات ضغط الزربناء ظلال الزر التي تحاكي العمق من العالم الحقيقي وحالات الضغط.
NeumorphismSoft UIإنشاء مظهر soft-UI neumorphism مع الظلال المضاءة والمظلمة المقترنة.
ظلال مشروط وPopoverإنشاء الشعور المرتفع والعائم للحوارات والقوائم المنسدلة.
تأثيرات التوهج وحلقات التركيزإنشاء تأثيرات التوهج وحلقات التركيز والإضاءات بنمط النيون.

كيف يعمل

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

1
معاملات الطبقة تغذي المنسّق
تخزّن كل طبقة ظل إزاحتي x/y والتمويه والانتشار ولونًا ست عشريًا وقيمة عتامة. عند كل تغيير، تحوّل دالة shadowToCss الصغيرة اللون الست عشري إلى مكونات RGB بتعبير نمطي، ثم تجمّع سلسلة rgba() — مثلًا 0px 4px 12px 0px rgba(0, 0, 0, 0.15). وتُضم الطبقات المتعددة بفواصل.
2
المتصفح يعرض المعاينة المباشرة
تُسند السلسلة المجمّعة إلى خاصية النمط boxShadow لعنصر div مباشرة في JSX. يحدّث React سمة DOM، ويرسم محرك CSS في المتصفح الظل فورًا — لا canvas ولا WebGL، بل عرض CSS أصلي فقط.
3
السحب لتحديد الموضع يستخدم Pointer Events API
النقر على مربع المعاينة وسحبه يستدعي setPointerCapture على العنصر، ثم يتتبع فروقات onPointerMove لتحديث إزاحتي x وy للطبقة النشطة في الوقت الفعلي. الضغط على Shift يطبق معامل تكبير 0.25x لتحديد موضع أدق.
4
يُنسخ الإخراج إلى الحافظة
تنتج الأداة صيغتي إخراج من بيانات الطبقات نفسها: تعريف CSS box-shadow قياسي، وصنف Tailwind ذا قيمة اعتباطية (shadow-[...]) تُستبدل فيه المسافات بشرطات سفلية وفق قواعد صياغة Tailwind. ويستخدم النسخ بنقرة واحدة navigator.clipboard.writeText.