طريقة الاستخدام
اختر نمطًا ثم عدّل إعدادات الظل. تتحدث المعاينة وCSS أثناء الكتابة. تحرك الإزاحة السالبة الظل لليسار أو للأعلى. فعّل الظل الداخلي لوضعه داخل العنصر. انسخ التصريح إلى قاعدة CSS. تعيد إعادة الضبط النمط الناعم.
← كل الأدوات
تطوير
مولّد ظلال CSS — معاينة ونسخ box-shadow
أنشئ ظل CSS بمعاينة مباشرة. عدّل الإزاحة والتمويه والانتشار واللون والعتامة، وجرّب الأنماط الجاهزة والظلال الداخلية ثم انسخ CSS. مجانًا.
● ملفاتك تبقى لكجارٍ تحميل المحوّل…
إعادة تحميل المحوّلمعلومات مهمة
ظل واحد لكل تصريح. قيم بكسل صحيحة: الإزاحة والانتشار من -100 إلى 100، والتمويه من 0 إلى 100، والعتامة من 0 إلى 100%. ألوان HEX من ثلاث أو ست خانات مع # اختياريًا. الأرقام العربية والفارسية مدعومة. لا طبقات متعددة أو ظلال نصوص أو تصدير صور أو استيراد CSS. تبقى المدخلات في الذاكرة ولا تُرفع أو تُحفظ.
كيف تعمل ظلال CSS
يحتوي التصريح التالي على الإزاحة الأفقية ثم العمودية ثم التمويه والانتشار واللون. تعني قيمة ألفا 0.22 عتامة 22%. يقلص الانتشار السالب الظل، بينما ينعّم التمويه حوافه.
box-shadow: 0px 12px 28px -6px rgba(0, 0, 0, 0.22);أسئلة عن box-shadow
ما الفرق بين التمويه والانتشار؟
ينعّم التمويه الحافة ولا يقبل قيمًا سالبة. يزيد الانتشار الموجب حجم الظل ويقلله الانتشار السالب. عندما يكون التمويه صفرًا تكون الحافة حادة.
كيف أنشئ ظلًا داخليًا؟
فعّل الخيار الداخلي أو اختر نمط الظل الداخلي. تنقل الكلمة inset الظل إلى داخل العنصر بدلًا من خارجه.
لماذا لا يظهر الظل؟
العتامة صفر تعني الشفافية. وقد يقع ظل بلا إزاحة أو تمويه أو انتشار خلف العنصر تمامًا. قد يخفي الانتشار السالب الكبير الظل الخارجي أيضًا.
هل تغير box-shadow حجم العنصر؟
لا. لا يشغل الظل مساحة في التخطيط. قد يقص عنصر حاوٍ جزءًا منه عند إخفاء المحتوى الفائض، وتغير الزوايا المستديرة شكل حدوده.
هل يمكن إنشاء عدة ظلال أو ظل للنص؟
تنتج الأداة ظل مربع واحدًا. تدعم CSS طبقات تفصل بينها فواصل، لكن تحرير الطبقات غير متاح هنا. يستخدم النص الخاصية المنفصلة text-shadow.