مولّد box-shadow لظل CSS
اضبط الإزاحة والتمويه والانتشار بالمنزلقات وانسخ سطر box-shadow.
CSS
اصنع ظل صندوق بـ CSS أونلاين
ترفع الظلال البطاقات والأزرار والقوائم عن الصفحة. تفتح هذه الصفحة مولّد CSS على تبويب ظل الصندوق، فتضبط الظل على المعاينة بدل تعديل الأرقام وإعادة تحميل الصفحة.
ظلال شائعة
| CSS | الاستخدام |
|---|---|
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2); | ظل رفيع للبطاقات وحقول الإدخال |
box-shadow: 0px 12px 32px -8px rgba(30, 27, 75, 0.35); | بطاقة مرفوعة بظل ناعم |
box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1); | ظل مُزاح حاد، بأسلوب مسطّح |
box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.25); | حقل أو زر يبدو مضغوطًا إلى الداخل |
الأداء
الظلال الكبيرة المموّهة تستهلك وقتًا في الرسم، ولا سيما حين تكون متحركة. ولتحريك ظل عند مرور المؤشر، من الحيل الشائعة وضع الظل على عنصر زائف (pseudo-element) وتحريك عتامته بدل تحريك الظل نفسه.
أدوات ذات صلة
لتدوير حواف العنصر نفسه، راجع مولّد border-radius؛ فالظل يتبع الحواف الدائرية. ولإضافة خلفية، راجع مولّد تدرّج CSS.