مولّد ظلال CSS (box-shadow)
يعمل على جهازك. لا يُرسل أي شيء.كل شيء يعمل في متصفحك - لا يُرسل أي شيء.
ابدأ من
الطبقات
الإزاحة الأفقية
الإزاحة العمودية
التمويه
الانتشار
اللون
الشيفرة
CSS
box-shadow:
0 10px 15px -3px rgb(15 23 42 / 0.1),
0 4px 6px -4px rgb(15 23 42 / 0.1);Tailwind CSS
shadow-[0_10px_15px_-3px_rgb(15_23_42_/_0.1),0_4px_6px_-4px_rgb(15_23_42_/_0.1)]تعديل ظل موجود
صمّم ظلال CSS بطبقات وظل داخلي وإعدادات ناعمة، وشاهدها مباشرة، ثم انسخ CSS أو صنف Tailwind. الصق ظلًا موجودًا لتعديله.
اصنع الظل الذي تريده بالعين بدل تخمين الأرقام. ابدأ من إعداد جاهز - ناعم أو متوسط أو حاد كلاسيكي أو ناعم متعدد الطبقات أو عائم أو داخلي أو نيومورفيك أو توهج - ثم اضبط إزاحة كل طبقة وتمويهها وانتشارها ولونها وعتامتها والظل الداخلي، والمعاينة تتحدث أثناء السحب. يمكن أن يضم الظل حتى ثماني طبقات، وهكذا تُصنع أكثر الظلال طبيعية. انسخ النتيجة بصيغة CSS أو صنف Tailwind، أو شاركها برابط، أو الصق box-shadow من ملف الأنماط لديك لمتابعة العمل عليه.
الأسئلة الشائعة
ماذا يفعل التمويه والانتشار؟
يليّن التمويه حافة الظل: 0 خط حاد، والقيم الأكبر تتلاشى عبر عدد أكبر من البكسلات. أما الانتشار فيكبّر الظل (موجب) أو يصغّره (سالب) قبل تمويهه - وانتشار سالب صغير مع تمويه كبير يعطي الظلال الناعمة المنكمشة في الواجهات الحديثة.
لماذا طبقات متعددة؟
الظلال الحقيقية داكنة وحادة قرب الجسم، وأفتح وأنعم كلما ابتعدت. لا تستطيع طبقة واحدة فعل الأمرين؛ أما تكديس بضع طبقات تتضاعف إزاحتها وتمويهها، مثل إعداد «ناعم متعدد الطبقات»، فيبدو أكثر طبيعية بكثير.
ما الظل الداخلي؟
يُرسم الظل الداخلي داخل الصندوق لا خارجه، فيبدو الصندوق مضغوطًا إلى الداخل - مفيد لحقول الإدخال والتجاويف والأزرار المضغوطة. ويمكن خلط طبقات داخلية وخارجية في ظل واحد.
هل يبطئ box-shadow الصفحة؟
بضعة ظلال لا تكلّف شيئًا يُذكر. أما التمويه الكبير جدًا على عناصر كثيرة أو تحريك box-shadow نفسه فقد يخفض معدل الإطارات على الهواتف البطيئة؛ وللحركة غيّر عتامة عنصر زائف يحمل الظل مسبقًا.