مولّد ظلال CSS
محلي — يعمل داخل متصفحك، وتبقى الملفات والمدخلات على جهازكمجاني — مجاني الاستخدامصمّم ظلّ الصندوق المثالي مع معاينة حيّة. اضبط الإزاحة والتمويه والانتشار واللون والظل الداخلي، ثم انسخ شيفرة CSS — بالكامل داخل متصفحك.
المخرج
المدخل
شيفرة CSS
box-shadow: 0px 10px 25px -5px rgba(17, 24, 39, 0.25);
يعمل داخل متصفحك، وتبقى الملفات والمدخلات على جهازك
نبذة عن ظلّ الصندوق
تضيف خاصية box-shadow في CSS عمقًا للعناصر عبر ظلال ناعمة ومتدرّجة — أساسية للبطاقات والأزرار وواجهات المستخدم الحديثة. يوفّر لك هذا المولّد أشرطة تمرير للإزاحة الأفقية والرأسية ونصف قطر التمويه والانتشار والشفافية، إضافةً إلى منتقي ألوان ومفتاح للظل الداخلي، مع معاينة فورية للنتيجة. انسخ القاعدة المُولّدة مباشرة إلى ملف الأنماط لديك؛ ولا يُرفع أي شيء إلى أي مكان.
كيف تستخدم مولّد ظلال CSS
- 1اضبط الإزاحة الأفقية والرأسية والتمويه والانتشار والشفافية.
- 2اختر لون الظل وفعّل «ظل داخلي» عند الحاجة.
- 3تحقق من النتيجة في المعاينة، ثم انسخ قاعدة CSS.
أسئلة شائعة
- ما الفرق بين التمويه والانتشار؟
- ينعّم التمويه حافة الظل، بينما يوسّع الانتشار أو يقلّص مساحة الظل الأساسية قبل تطبيق التمويه.
- ماذا يفعل الظل الداخلي؟
- يرسم inset الظل داخل حدود العنصر، ويمكن أن يمنحه مظهرًا مضغوطًا أو غائرًا.
- هل يمكن استخدام أكثر من ظل واحد في CSS؟
- نعم، تقبل CSS ظلالًا متعددة تفصل بينها فواصل. ينشئ هذا المولّد ظلًا واحدًا في المرة.