الأدوات · CSS · مولّد ظل CSS
مولّد ظل CSS
أنشئ ظلًا متعدد الطبقات بخاصية box-shadow في CSS مع معاينة حيّة، ثم انسخ الكود.
أضف ملفًا وشغّل الأداة.
ملفك جاهز.
جرّب ملفًا آخر، أو أعد المحاولة.
الإعدادات
اضبط الإعدادات أدناه. تتحدّث النتيجة أثناء العمل.
تعمل الأداة بالكامل داخل متصفحك. لا يُرفع أي ملف.
تعمل الأداة بالكامل داخل متصفحك. لا يُرفع أي شيء إلى أي خادم، ولا يغادر جهازك.
كيف تعمل
ابدأ من شكل جاهز، أو اضبط إزاحة الطبقة وتمويهها وانتشارها ولونها بنفسك.
أضف طبقات أكثر للعمق (حتى 4 طبقات بالإجمالي)، أو احذف أيًا منها.
انسخ كود box-shadow النهائي.
أسئلة شائعة
نعم، حتى أربع طبقات. تُعرَض بالترتيب الذي أضفتها به، وهو نفس الترتيب الذي يطبّقه CSS، فالطبقة الأولى تكون الأقرب إلى العنصر.
الإزاحة الأفقية والرأسية تحرّكان الظل. التمويه يلطّف حافته. الانتشار يكبّر الظل أو يصغّره قبل تطبيق التمويه.
يرسم الظل داخل حدود العنصر بدلًا من خارجه، لمظهر يبدو غاطسًا للداخل.
لا. كل شيء يحدث داخل متصفحك، ولا يُرسَل شيء إلى أي مكان.
أدلة
نظرة أقرب على مشكلات محددة تحلّها هذه الأداة.
Why One Flat Shadow Looks Fake, and Layered Ones Don't
A single box-shadow value usually reads as a sticker glued behind the element, not an object lifted off the page. Real light casts two different kinds of shadow at once, and CSS can only fake that with more than one layer.
اقرأ الدليلHow to Build a Layered CSS Box-Shadow
The exact steps for building a real, comma-separated box-shadow value with more than one layer, plus the two settings people get backwards: spread versus blur, and inset versus outer.
اقرأ الدليلInset vs. Drop Shadow: Which One Your Design Actually Needs
The same four numbers - offset, blur, spread, opacity - mean opposite things depending on one checkbox. Here's how to tell which direction a given piece of UI actually calls for.
اقرأ الدليل
التعليقات