مولد ظل الصندوق CSS
صمم ظلال الصناديق بصرياً مع معاينة مباشرة. اضبط الإزاحة والضبابية والانتشار واللون والشفافية. انسخ كود CSS فوراً. أداة مجانية.
كيفية استخدام مولد ظل الصندوق
اضبط أشرطة التمرير للتحكم في الإزاحة الأفقية والرأسية ونصف قطر الضبابية والانتشار واللون والشفافية. تتحدث المعاينة المباشرة فوراً. أضف طبقات ظل متعددة لتأثيرات عمق معقدة تُستخدم في تصميم واجهات المستخدم الحديثة.
نصائح لظلال واقعية
استخدم شفافية منخفضة (0.1-0.3) وضبابية معتدلة وإزاحة رأسية طفيفة لمظهر ارتفاع طبيعي. اجمع ظلين — واحد ضيق للتحديد وآخر ناعم للإضاءة المحيطة — لمحاكاة ارتفاع Material Design.
الأسئلة الشائعة
ما هو خيار "داخلي" (inset)؟
الظلال الداخلية تظهر داخل العنصر بدلاً من خارجه، مما ينشئ تأثير ضغط أو تجويف. مفيد لحقول الإدخال وظلال البطاقات الداخلية.
هل يمكنني استخدام ظلال صندوق متعددة؟
نعم. انقر "إضافة ظل" لطبقات ظلال متعددة. CSS يدعم قيم ظل مفصولة بفاصلة، وهذه الأداة تُنشئ الكود المجمع لك.
RELATED TOOLS