مولّد Box Shadow
كدّس ظلالاً متعددة، اضبط كل واحد بـ x/y/ضبابية/انتشار/لون/عتامة/inset، وعاين على بطاقة أو زر أو دائرة أو حقل إدخال. 13 إعدادًا جاهزًا للإنتاج تشمل مستويات Material و Neumorphism و Neon Glow و Long Shadow. الناتج CSS عادي أو فئة Tailwind بقيمة حرة.
Everything runs in your browser. Nothing is uploaded.
كيفية استخدام مولّد box shadow
- اختر إعدادًا مسبقًا أو انقر '+ إضافة طبقة' للبناء من الصفر.
- اضبط x و y والضبابية والانتشار واللون والعتامة و inset لكل طبقة.
- أعد ترتيب الطبقات بأزرار ↑↓ (الأعلى أقرب إلى العنصر).
- بدّل شكل المعاينة (بطاقة / زر / دائرة / حقل إدخال) واضبط لون الخلفية والعنصر.
- انسخ CSS أو فئة Tailwind بقيمة حرة.
الأسئلة الشائعة
ما الفرق بين الضبابية والانتشار؟
تُلين الضبابية حافة الظل — أعلى = ظل أنعم. ينمي الانتشار الظل أو يقلصه قبل الضبابية — موجب = أكبر، سالب = أصغر.
ما هو inset؟
ظلال inset تُرسم داخل العنصر بدل خارجه، فيبدو العنصر مضغوطًا أو غائرًا.
لماذا تكديس عدة ظلال؟
الظلال الحقيقية متعددة الطبقات — ظل حاد قريب من العنصر مع ظل ناعم أبعد يبدو أكثر طبيعية. يستخدم Material Design 2-3 طبقات.
هل تعمل فئة Tailwind في أي مشروع؟
تستخدم صيغة Tailwind للقيم الحرة (`shadow-[...]`)، التي تتطلب Tailwind v3+ مع JIT/قيم حرة.