مولّد CSS Box Shadow
أنشئ كود box-shadow في CSS بصرياً: منزلقات للإزاحة، التمويه، الانتشار، اللون بشفافية، وضع الحاشية، وما يصل إلى أربع طبقات مع معاينة حية.
🔒 تتم معالجتها بالكامل في متصفحك — ولا يتم تحميل أي شيء تدخله هنا على الإطلاق.
النتيجة
تعريف box-shadow يحتوي على ستة أجزاء متغيرة — الإزاحة الأفقية والرأسية، التمويه، الانتشار، اللون وكلمة "inset" الاختيارية — والطريقة الوحيدة لإتقانها هي أن تراها. يضع هذا المولّد كل جزء على منزلق ويعرض النتيجة على بطاقة معاينة أثناء السحب، لذا فإن سطر CSS أسفل الصفحة يمثل دائماً ما تراه بالضبط.
الظلال الواقعية نادراً ما تكون ذات طبقة واحدة. تتيح لك قائمة الطبقات رصّ ما يصل إلى أربعة ظلال في تعريف واحد: خط داكن ضيق لتحديد الحافة مع غسيل واسع ناعم للإرتفاع، أو الزوج الفاتح والداكن الذي يميز النيومورفيزم. اختر طبقة لتعديلها، وأزل ما لا تحتاج إليه، وتتحدّث قيمة box-shadow المجمعة حياً.
تبدو الظلال مختلفة جداً على الواجهات الداكنة، حيث يختفي ظل أسود على صفحة شبه سوداء تماماً. مفتاح تبديل خلفية المعاينة ينقّل الخلفية بين الفاتح والداكن لتتحقق من السمتين قبل النشر. تغطي الصفحات المعدة مسبقاً المتغيرات التي يبحث عنها الناس فعلاً: ظل ارتفاع ناعم، تجويف داخلي، وصفة النيومورفيزم ذات الطبقتين، وظل بطاقة خفي.
مثل كل أداة على هذا الموقع، المولّد مجاني ويعمل بالكامل داخل متصفحك: لا رفع للملفات، لا حساب، ويواصل العمل دون اتصال ما إن تُحمّل الصفحة.