المستخدمة مؤخرًا

    افتح أداة وستظهر هنا.

    مولد ظل الصندوق

    توليد خصائص box-shadow في CSS

    مشاركة هذه الأداة

    الإبلاغ عن مشكلة

    صف المشكلة دون تضمين مدخلات أو ملفات خاصة.

    ما مدى فائدة هذه الأداة؟

    ما مدى فائدة هذه الأداة؟

    طبقات الظل

    الظل 1

    ظلال جاهزة

    نصائح حول الظلال

    تحرك قيم الإزاحة الموجبة الظلال نحو الأسفل واليمين، وتحركها القيم السالبة نحو الأعلى واليسار.

    يحدد نصف قطر التمويه نعومة الظل، وكلما زادت القيمة صار الظل أكثر انتشارًا.

    يوسّع نصف قطر الانتشار حجم الظل أو يقلّصه.

    تنشئ الظلال الداخلية ظلالًا داخلية لإضفاء تأثير العمق.

    يمكن تكديس عدة ظلال فوق بعضها للحصول على تأثيرات إضاءة معقدة.

    تنتج قيم الشفافية المنخفضة ظلالًا أكثر خفوتًا وواقعية.

    معاينة مباشرة

    معاينة

    مقياس المعاينة: 100%

    تصريح CSS

    box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);

    فئة CSS

    .shadow {
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
}

    Tailwind CSS (تقريبي)

    shadow

    هذا اقتراح للنمط فقط. تتطلب الإزاحات والألوان المخصصة والظل الداخلي والطبقات المتعددة استخدام شيفرة CSS المولّدة.

    عدّل طبقة أو جرّب ظلًا جاهزًا. تتحدث المعاينة أثناء عملك.

    عن مولد ظل الصندوق

    يساعدك مولد box-shadow في CSS المجاني لدينا على إنشاء تأثيرات ظل احترافية بتحكم بصري كامل. اضبط الإزاحة ونصف قطر التمويه ونصف قطر الانتشار واللون والشفافية باستخدام شرائح سحب سهلة، وشاهد النتيجة تتحدث لحظيًا. ادمج عدة ظلال معًا للحصول على تأثيرات عمق معقدة تبرز عناصر واجهتك.

    الظلال أساسية لإرساء التسلسل البصري والعمق في واجهات الويب الحديثة. يمكن لـbox-shadow المتقن أن يجعل البطاقات تبدو كأنها تطفو فوق الصفحة، وتمنح الأزرار إحساسًا بالتفاعل، وتبرز عناصر التنقل عن الخلفية. وتغنيك هذه الأداة عن التجربة والخطأ في كتابة قيم box-shadow يدويًا.

    يدعم المولد الظلال الخارجية والظلال الداخلية وطبقات الظل المتعددة، ويتضمن 6 قوالب جاهزة لأنماط الظل الشائعة. يُقدَّم الناتج على شكل شيفرة CSS مع زر نسخ بنقرة واحدة، إلى جانب اقتراحات تقريبية لفئات Tailwind CSS. تتم كل المعالجة في متصفحك دون إرسال أي بيانات إلى أي خادم.

    التصميم

    أضيفت حديثًا

    كل الأدوات

    إعدادات الخصوصية

    اختر تفضيلاتك للتحليلات والإعلانات والتخصيص. يُبقي التخزين الأساسي ميزات مثل المظهر والأدوات المحفوظة تعمل.

    التخزين الأساسي مفعّل دائمًا.