تصميم ظلال CSS بصرياً
تضفي الظلال عمقاً على واجهات المستخدم: فهي تبرز البطاقات عن الصفحة، وتوضح الأزرار المضغوطة، وتفصل النوافذ الحوارية عن المحتوى الخلفي. تُعد خاصية box-shadow في CSS قوية جداً، لكن يصعب تعديل قيمها الخمس دون معاينة بصرية. يوفر لك هذا المولد أشرطة تمرير ومعاينة مباشرة، ويتيح لك دمج عدة ظلال للحصول على مظهر طبيعي، ويمنحك كود CSS نظيف وجاهز للصقه مباشرة في مشروعك.
الميزات
- التحكم في الإزاحة، والتمويه، والانتشار، واللون، والشفافية مع معاينة فورية.
- ما يصل إلى خمس طبقات مدمجة في تصريح
box-shadowواحد. - ظلال داخلية (Inset) لتأثيرات العناصر المضغوطة والغائرة.
- استدارة الزوايا وألوان المعاينة لتلائم تصميمك.
- إعدادات مسبقة لظلال ناعمة، ومتوسطة، وحادة، ومتعددة الطبقات، وداخلية، وتأثيرات التوهج.
- كود CSS جاهز للنسخ مع ألوان بصيغة
rgba().
مثال
ظل متعدد الطبقات يبدو طبيعياً على الخلفيات الفاتحة:
.card {
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.07),
0px 4px 8px 0px rgba(0, 0, 0, 0.07),
0px 16px 32px 0px rgba(0, 0, 0, 0.07);
border-radius: 16px;
}
نصائح لتصميم الظلال
| الهدف | الإعدادات المقترحة |
|---|---|
| بطاقة بظل خفيف على خلفية بيضاء | y 4, blur 12, opacity 8% |
| قائمة منسدلة أو نافذة حوارية عائمة | 2–3 طبقات, y حتى 24, blur حتى 48, opacity 7–12% لكل طبقة |
| مظهر "مسطح" كلاسيكي | x 6, y 6, blur 0, opacity 100% |
| تأثير التركيز أو التوهج | x 0, y 0, blur 16–24, spread 2–4, لون العلامة التجارية |
| حقل إدخال مضغوط | inset, y 2, blur 6, opacity 25–30% |
حافظ على اتساق مصدر الإضاءة: إذا كانت الظلال تتجه لأسفل في أحد العناصر، فيجب أن تتجه لأسفل في جميع العناصر الأخرى.
أدوات ذات صلة
أنشئ خلفية لبطاقاتك باستخدام مولد تدرجات CSS، وحوّل الألوان بين HEX و RGB و HSL باستخدام محول الألوان، أو اختر الألوان من لقطة شاشة عبر منتقي الألوان من الصور.