مولّد ظل box-shadow

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

طريقة الاستخدام

أربع خطوات: الصق، شغّل، راجع، انسخ. كل شيء يبقى في المتصفح.

الصق المدخلات

الصق المدخلات

أدخل CSS أو HTML أو JSON أو نصًا آخر. لا يُرفع شيء.

شغّل الأداة

شغّل الأداة

انقر تحويل أو تشغيل. تظهر النتيجة فورًا.

راجع المخرجات

راجع المخرجات

اقرأ الرمز المُنشأ والملاحظات قبل الاستخدام.

انسخ واستخدم

انسخ واستخدم

انسخ النتيجة والصقها في مشروعك.

حول هذه الأداة

تتيح الأداة ضبط الإزاحة أفقيًا ورأسيًا ومقدار التمويه والانتشار واللون، مع خيار inset، ثم تصدير النتيجة كتصريح box-shadow أو كصنف اختياري shadow-[…] في Tailwind.

مثال

القيم الأولية تحاكي بطاقة مرتفعة فوق خلفية داكنة.

إدخال

0 8px 24px 0 rgba(0,0,0,0.2)

مخرجات

box-shadow: 0px 8px 24px 0px rgba(0,0,0,0.2);

نصيحة

الظلال الناعمة في الواجهات تخرج غالبًا عن المقياس الافتراضي، والقيم الاختيارية تحفظ الشكل المطلوب.