مولد الظل الصندوقي

صمم ظلال مربعة ذات طبقات مع الإزاحة والتعتيم والانتشار واللون. قم بالمعاينة على البطاقة، ثم انسخ ملف CSS بنقرة واحدة.

Box Shadow Generator

Live
Preview card

CSS output

box-shadow: 8px 16px 32px -4px rgba(192, 38, 211, 0.35);
border-radius: 24px;

Key capabilities

  • صمم ظلال مربعة ذات طبقات مع الإزاحة والتعتيم والانتشار واللون - مع تضمين المعاينة المباشرة.
  • يعمل في المتصفح الخاص بك
  • مجاني للاستخدام

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

  1. ضبط الإزاحة، والتعتيم، والانتشار.
  2. اختر اللون والعتامة (أو أضف طبقات).
  3. انسخ مربع الظل CSS.

How this tool works

  1. ضبط الإزاحة، والتعتيم، والانتشار.
  2. اختر اللون والعتامة (أو أضف طبقات).
  3. انسخ مربع الظل CSS.

Recommended settings

  • استخدم الخيارات الافتراضية أولاً، ثم اضبطها إذا لزم الأمر

Supported formats

Text / on-page input

File size and limits

  • قد تبدو المعاينات المعقدة للغاية ومتعددة الطبقات أبطأ على الهواتف القديمة.

Privacy

تعمل مولدات الألوان وCSS بالكامل في متصفحك. لا تقوم المعاينات والتحويلات أبدًا بتحميل أنماطك.

Common use cases

  • استخدم Box Shadow Generator وقتما تشاء: قم بتصميم ظلال مربعة ذات طبقات مع الإزاحة والتمويه والانتشار واللون - بما في ذلك المعاينة المباشرة.

Troubleshooting

تبدو المعاينة مختلفة بعد اللصق

تحقق من وجود CSS منافس على صفحتك (إعادة التعيين، الألوان الموروثة). انسخ القاعدة التي تم إنشاؤها إلى ورقة أنماط معزولة أولاً.

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

هل يؤدي هذا إلى تحميل CSS الخاص بي؟

لا. يتم تشغيل المولدات والمحولات في متصفحك من خلال المعاينة المباشرة.

هل أحتاج إلى حساب؟

لا، افتح الأداة، وقم بتعديل عناصر التحكم، وانسخ ملف CSS.

أدوات ذات صلة