CSS SHADOW STUDIO

مولّد CSS Box Shadow

صمّم ظلًا ناعمًا أو بارزًا أو داخليًا، وعدّل خصائصه بمقابض سهلة وشاهد النتيجة فورًا، ثم انسخ كود CSS إلى مشروعك.

ظل CSS — معاينة الظلال والتحكم في العمق
معاينة الظلال والتحكم في العمق
معاينة فورية تحكم دقيق نسخ الكود

خصائص الظل

عدّل القيم أو اختر نمطًا جاهزًا.

المعاينة المباشرة

معاينة الظلBox Shadow

كود CSS

أفكار سريعة

متى تستخدم Box Shadow؟

  • Blur: كلما زادت قيمته أصبح انتقال الظل أنعم وأوسع.
  • Spread: يوسّع مساحة الظل أو يقلصها قبل تطبيق التمويه.
  • Opacity: تتحكم في شفافية الظل، وغالبًا تعطي القيم المنخفضة مظهرًا طبيعيًا.
  • Inset: يرسم الظل داخل العنصر بدلًا من خارجه.

افحص الظل على خلفية واجهتك الفعلية، وتجنب المبالغة فيه حتى لا تقل وضوح العناصر.

دليل الاستخدام

طريقة الاستخدام والمخرجات

حرّك منزلقات الإزاحة والتمويه والانتشار والشفافية، واختر اللون والظل الداخلي، ثم انسخ كود CSS الناتج.

المخرجات والقيود

المخرج تصريح CSS من نوع box-shadow لمكوّن واحد. لا يضمن أن الظل مناسب لكل خلفية أو متصفح أو نظام تصميم؛ اختبره في الصفحة المستهدفة.

نصائح وحالات استخدام

ابدأ بقيم خفيفة، وراجع الظل على الخلفية الفعلية وفي الشاشات الصغيرة، وتجنب استخدام الظلال وحدها لبيان التركيز.

الخصوصية

لا تدخل كلمات مرور أو مفاتيح سرية أو بيانات شخصية حساسة. لا تفترض أن المعالجة محلية لمجرد أن الأداة تعمل في صفحة ويب؛ راجع سياسة الخصوصية وسلوك الشبكة قبل استخدام بيانات سرية.

الأسئلة الشائعة

هل ينتج ملف CSS كاملًا؟

لا، ينتج قيمة/تصريح الظل فقط.

هل يؤثر في HTML؟

لا، يجب لصق الكود في محدد CSS المناسب.

لماذا يبدو الظل مختلفًا؟

قد تختلف الخلفية أو الأبعاد أو قواعد CSS المحيطة.

قائمة مراجعة التصميم وإمكانية الوصول والاختبار