مولد ظل CSS box-shadow
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.15);Drop Shadow
آخر تحديث: 2026 · أداة مجانية عبر الإنترنت
ما هو مولد ظل CSS box-shadow؟
مولّد CSS box-shadow مجاني عبر الإنترنت بعناصر تحكم في الإزاحة والتمويه والانتشار واللون والظل الداخلي inset، يعرض معاينة حية للظل ويُنتج كود CSS box-shadow جاهزًا للنسخ.
كيفية الاستخدام
- 1 اختيار إعداد مسبق — ابدأ بسرعة باستخدام زر الإعداد المسبق.
- 2 ضبط أشرطة التمرير — اضبط الظل باستخدام أشرطة تمرير إزاحة X/Y والضبابية والانتشار.
- 3 معاينة — تحقق من النتيجة في الوقت الفعلي في المعاينة أعلاه.
- 4 نسخ CSS — استخدم زر النسخ للحصول على CSS box-shadow.
أدوات ذات صلة
مولد تدرج CSS مولد تدرجات CSS مرئي ومجاني عبر الإنترنت: صمم تدرجات خطية وشعاعية ومخروطية، وأضف نقاط ألوان متعددة، واضبط الزاوية، ثم انسخ كود CSS الجاهز لخلفيات موقعك.
مولد CSS border-radius مولّد CSS border-radius مجاني عبر الإنترنت بثماني مقابض زوايا مستقلة وأشرطة تمرير، يعرض معاينة حية للشكل المدوّر ويُنتج كود CSS border-radius جاهزًا للنسخ لأي عنصر.
مولد CSS Flexbox ساحة CSS Flexbox مجانية عبر الإنترنت مع محرر مرئي لخصائص justify-content وalign-items وflex-direction وwrap، تعرض معاينة حية للتخطيط وتُنشئ كود Flexbox CSS جاهزًا للنسخ.
الأسئلة الشائعة
نعم، استخدم زر 'إضافة ظل' لتراكب ظلال متعددة.
نعم، قم بتفعيل مربع اختيار Inset على كل ظل لإنشاء ظل داخلي.
يتم توفير خمسة إعدادات مسبقة: Subtle و Medium و Large و Inset و Double.
نعم، يمكنك إدخال rgba(0,0,0,0.15) مباشرة في حقل اللون.
لا. تتم جميع الحسابات في المتصفح.