Developer Tools
Web Utilities
Image Toolsمولّد ظلال CSS
أنشئ تأثيرات CSS box-shadow بصريًا بطبقات متعددة ومعاينة فورية. خصّص الضبابية والانتشار واللون والشفافية.
إعدادات الظل
طبقة 1
المعاينة وكود CSS
.box-element {
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.3);
background-color: #ffffff;
border-radius: 8px;
}0px 4px 6px 0px rgba(0, 0, 0, 0.3)أدوات ذات صلة
حول هذه الأداة
كيف تعمل
- أنشئ تأثيرات CSS box-shadow بصريًا بطبقات متعددة
- اضبط الإزاحة الأفقية والرأسية لتحديد موضع الظل
- تحكم في نصف قطر الضبابية والانتشار للنعومة والحجم
- خصّص ألوان الظل مع التحكم في الشفافية
- أضف ظلالًا داخلية لتأثيرات التوهج الداخلي
- طبّق طبقات ظل متعددة لتأثيرات عمق معقدة
حالات الاستخدام الشائعة
- إنشاء عمق وارتفاع في تصاميم البطاقات
- إضافة ظلال خفية للأزرار وعناصر UI
- تصميم واجهات Neumorphism (soft UI)
- بناء تأثيرات توهج لعناصر الدعوة إلى الإجراء
- تنفيذ مواصفات ظل تصميم المواد
- إنشاء تأثيرات عناصر عائمة ومرفوعة
الأسئلة المتكررة
ما هو box shadow في CSS؟
box shadow هي خاصية CSS تضيف تأثيرات ظل حول إطار العنصر. تسمح لك بإنشاء عمق وارتفاع في تصاميمك من خلال ظلال يمكن تحديد موضعها وضبابيتها وانتشارها ولونها.
كيف أضيف طبقات ظل متعددة؟
انقر على زر '+ إضافة طبقة' لإضافة المزيد من طبقات الظل إلى عنصرك. يمكن تخصيص كل طبقة بشكل مستقل بمواضع وضبابية وانتشار وألوان وشفافية مختلفة.
ما الذي يتحكم فيه كل معامل ظل؟
الإزاحة الأفقية تحرك الظل إلى اليسار (سالب) أو اليمين (موجب). الإزاحة الرأسية تحركه إلى الأعلى (سالب) أو الأسفل (موجب). نصف قطر الضبابية يتحكم في ليونة الظل أو حدّته.
ما هو inset shadow؟
يُرسم الظل الداخلي داخل حدود العنصر بدلًا من الخارج. يخلق مظهر أن العنصر مضغوط في السطح. ضع علامة على خانة 'Inset' في أي طبقة ظل لجعلها داخلية.
كيف أنشئ تأثير Neumorphism؟
يستخدم Neumorphism ظلين: أحدهما فاتح والآخر داكن، موضوعان على جانبين متعاكسين. استخدم إعدادات 'Neumorphism' أو 'Neumorphism Inset' كنقطة بداية.
هل يمكنني استخدام قيم انتشار سالبة؟
نعم! قيم الانتشار السالبة تقلص الظل إلى الداخل قبل تطبيق الضبابية. يُستخدم هذا بشكل شائع في تصميم المواد لإنشاء ظلال أكثر واقعية وتركيزًا.
كيف أنسخ كود CSS؟
هناك خياران للنسخ: 'نسخ CSS' يوفر قاعدة CSS كاملة، و'نسخ القيمة' يوفر فقط قيمة box-shadow التي يمكن لصقها في أي قاعدة CSS موجودة.
ما هي أنماط الظل المحددة مسبقًا؟
تتضمن الأداة 12 نمطًا محددًا مسبقًا: ناعم، متوسط، كبير، كبير جدًا، داخلي، مخطط، Neumorphism، Neumorphism Inset، ملون، توهج، مرفوع وعائم.
هل يمكنني إنشاء تأثير توهج باستخدام box shadow؟
نعم! استخدم إعداد 'توهج' أو أنشئ إعدادك الخاص بتعيين الإزاحتين الأفقية والرأسية على 0، باستخدام نصف قطر ضبابية كبير (20px أو أكثر) واختيار لون زاهي.
كيف تعمل شفافية الظل؟
تتحكم الشفافية في مدى شفافية الظل أو صلابته، من 0 (شفاف تمامًا) إلى 1 (معتم تمامًا). الشفافية الأقل تخلق ظلالًا خفية، والأعلى تخلق ظلالًا أكثر دراماتيكية.
هل تدعم جميع المتصفحات box shadow؟
نعم، خاصية CSS box-shadow مدعومة بشكل جيد في جميع المتصفحات الحديثة بما فيها Chrome وFirefox وSafari وEdge والمتصفحات المحمولة. لا تحتاج إلى بوادئ البائع.
هل يمكنني تحريك box shadow؟
نعم، يمكن تحريك box shadow باستخدام انتقالات أو حركات CSS. استخدم خاصية transition على box-shadow، مثلاً: 'transition: box-shadow 0.3s ease'.