مولّد ظل CSS (box-shadow)

كيفية الاستخدام

1. يوجد ظل ناعم على البطاقة بالفعل — حرّك أي منزلق (إزاحة X/Y والضبابية والتمدّد) أو اختر لوناً وشفافية، أو ضع علامة «داخلي» لظل داخلي. كل شيء يتحدّث حيّاً دون زر.
2. انقر على إعداد جاهز (طفو ناعم، رفع قوي، داخلي، توهّج نيون، مزدوج، نيومورفيزم) لتحميل مظهر جاهز فوراً.
3. أضف طبقات بـ «+» لرصّ ظلال متعددة؛ كل طبقة تُحرّر مستقلاً. انسخ كامل إعلان box-shadow بضغطة.

مثال

طفو ناعم

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

انسخه مباشرة في أي مُحدِّد، مثل .card { box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.15); }. الإعداد «مزدوج» يُخرج ظلّين مفصولين بفاصلة؛ و«نيومورفيزم» يحتاج خلفية فاتحة لظهور أثره.

النطاق والحدود والأسئلة الشائعة

• box-shadow فقط: لا مرشّح drop-shadow() ولا text-shadow، وCSS لا تدعم ظلالاً متدرّجة — كلها خارج النطاق.
• اللون من منتقي الألوان مع منزلق الشفافية؛ لا نحلّل نصوص CSS للألوان التي تلصقها، فلا مجال لخطأ كتابة أو قراءة.
• نيومورفيزم يعتمد على سطح فاتح — على خلفيات داكنة جداً قد لا يظهر أثره. هذه خاصية النمط لا عيباً.
• لا يُحفظ شيء ولا تُشارك روابط بمعاملات: أعِد التحميل فتعود إلى «طفو ناعم» الافتراضي. كل شيء في متصفّحك.

أدوات ذات صلة

عندما تحتاج إلى المزيد في اللون أو الظلال.