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