مولد ظل الصندوق CSS — أداة مجانية على الإنترنت

ما هو مولد ظل الصندوق CSS؟

مولد ظل صندوق CSS مجاني عبر الإنترنت. اضبط الإزاحة والضبابية والانتشار واللون باستخدام أدوات تحكم مرئية لإنشاء كود CSS فورًا.

خاصية box-shadow في CSS هي واحدة من أكثر الأدوات تنوعًا في مجموعة أدوات مصمم الويب، القادرة على إضافة العمق والتسلسل الهرمي والاهتمام البصري لعناصر الواجهة. يوفر مولد ظل الصندوق في CSS واجهة بصرية لإنشاء كود box-shadow في CSS، مع تحكم كامل في كل معلمة ومعاينة تفاعلية تتحدث في الوقت الفعلي.

يكشف المولد عن خمس معلمات قابلة للضبط عبر منزلقات. يحرك إزاحة X (X Offset) الظل أفقيًا (القيم الإيجابية تحركه لليمين، والسلبية لليسار). تحرك إزاحة Y (Y Offset) الظل عموديًا (القيم الإيجابية تحركه لأسفل، والسلبية لأعلى). يتحكم نصف قطر التمويه (Blur Radius) في مدى نعومة حواف الظل — الصفر ينتج ظلًا حادًا، بينما تخلق القيم الأعلى تأثيرًا أنعم وأكثر انتشارًا. يوسع نصف قطر الانتشار (Spread Radius) أو يقلص حجم الظل دون التأثير على التمويه. يضبط منتقي الألوان لون الظل مع التحكم في الشفافية عبر قناة alpha.

تعرض بطاقة معاينة حية تأثير كل تعديل فورًا. بطاقة المعاينة مصممة بخلفية بيضاء وزوايا دائرية لمحاكاة مكون واجهة حقيقي، بحيث يمكنك رؤية كيف سيبدو الظل بالضبط على عناصر واجهتك الفعلية. تُضمَّن ستة ظلال جاهزة للاختيار السريع: خفيف، ومتوسط، وثقيل، وضبابي، وداخلي، ومرفوع.

يُعرض كود box-shadow في CSS المولد بتنسيق جاهز للنسخ. يدعم المخرج الصيغة المختصرة الكاملة بما في ذلك الكلمة الأساسية inset للظلال الداخلية. يمكن دمج قيم box-shadow المتعددة عن طريق نسخ المخرج ولصق عدة تعريفات يدويًا. تتحقق الأداة أيضًا من صحة الصيغة، لذا كل نسخة عبارة عن تعريف CSS صالح.

حالات استخدام واقعية لـ مولد ظل الصندوق CSS

إنشاء ظل بطاقة خفي لواجهة لوحة تحكم

تحتوي لوحة التحكم الخاصة بك على بطاقات تعرض مقاييس ورسومًا بيانية. استخدم المولد لضبط X=0، وY=2، وBlur=4، وSpread=0 بلون رمادي فاتح عند شفافية 10%. يخلق الظل الناتج عمقًا خفيًا على البطاقات. انسخ CSS المولدة وطبّقها على فئة مكون البطاقة الخاصة بك.

تصميم تأثير زر مرفوع لصفحة هبوط

يحتاج زر دعوة لاتخاذ إجراء إلى مظهر مرفوع. اضبط X=0، وY=4، وBlur=6، وSpread=-1 بلون ظل أغمق. بدّل خيار inset إلى إيقاف. النتيجة زر يبدو طافيًا فوق سطح الصفحة. انقر على إعداد "مرفوع" (Lifted) كنقطة بداية واضبط القيم بدقة.

إنشاء ظل داخلي لحالة تركيز حقل البحث

يحتاج حقل إدخال البحث إلى توهج داخلي عند التركيز عليه. بدّل خيار Inset إلى تشغيل. اضبط X=0، وY=2، وBlur=4، وSpread=0 بلون العلامة التجارية الأساسي عند شفافية 30%. يظهر الظل الداخلي داخل حدود الإدخال، مشيرًا إلى التركيز للمستخدم.

لماذا نستخدم مولد ظل الصندوق CSS؟

Full control: X/Y offset, blur, spread, color
Inset shadow toggle
preview on a card element حي
6 preset shadows included

كيفية استخدام مولد ظل الصندوق CSS — خطوة بخطوة

اضبط X offset, Y offset, blur, and spread using sliders.

اختر a shadow color and toggle inset if needed.

عاين the shadow on the card in real-time.

انسخ the generated CSS box-shadow code.

من هو مولد ظل الصندوق CSS الأنسب له؟

UI design
card styling
button effects
تطوير الويب

نصائح احترافية لـ مولد ظل الصندوق CSS

1ترتيب القيم في الصيغة المختصرة لـ box-shadow هو: X-offset Y-offset blur-radius spread-radius color. يجب أن تأتي inset أولًا أو أخيرًا. يخرج المولد الصيغة الصحيحة تلقائيًا.
2الظلال المتعددة الطبقات تخلق عمقًا أكثر واقعية. استخدم ظلين: ظل إزاحة خفيف للعمق الرئيسي وظل أكبر وأنعم مع شفافية أقل للضوء المحيط. مثال: box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 10px 20px rgba(0,0,0,0.08).
3تجنب استخدام box-shadow على عناصر كبيرة جدًا (حاويات بعرض الصفحة). تكلفة العرض للظلال الكبيرة يمكن أن تؤثر على أداء التمرير، خاصة على الأجهزة المحمولة.
4معلمة الانتشار بقيمة سالبة تخلق ظلًا أصغر من العنصر. عند دمجها مع التمويه، ينتج هذا تأثير "vignette" حيث يتركز الظل حول الحواف.

مولد ظل الصندوق CSS — الأسئلة الشائعة

What is CSS box-shadow?

box-shadow is a CSS property that adds shadow effects around an element. It accepts X offset, Y offset, blur radius, spread radius, color, and an optional inset keyword.

Can I apply multiple shadows?

Yes, separate multiple shadows with commas: box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08);

Will the generated CSS work in all browsers?

The CSS generators produce W3C-standard code that works in Chrome, Firefox, Safari, and Edge. Vendor prefixes are included where needed for older browser versions.

Can I copy the generated code directly?

Yes. Each generator provides a copy button that places the code on your clipboard. The code is ready to paste into your project — no cleanup or modification needed.

Is مولد ظل الصندوق CSS really free to use?

Yes, مولد ظل الصندوق CSS is completely free with no hidden charges, no usage limits, and no premium tiers. You can use it as often as you need without signing up or providing any personal information.

هل أنت مستعد لاستخدام مولد ظل الصندوق CSS؟

أداة مجانية على الإنترنت — تعمل في متصفحك، بدون تسجيل. ابدأ في استخدامها الآن.

جربها الآن