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