مولّد CSS

مولّد ظلال CSS

صمّم box-shadow وtext-shadow بصريًا، واجمع عدة طبقات، وانسخ CSS جاهزًا للاستخدام.

طبقات الظل

إعدادات الظل

إعدادات جاهزة

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

مظهر المعاينة

CSS الناتج

.shadow-box {
  box-shadow: 0px 18px 40px -12px rgba(99, 102, 241, 0.55);
}

فهم قيم ظلال CSS

تتكون box-shadow من الإزاحة الأفقية والعمودية والتمويه والانتشار واللون وكلمة inset الاختيارية. تستخدم text-shadow الإزاحة والتمويه واللون. تحدّث عناصر التحكم التصريح الكامل فورًا لتشاهد تأثير كل قيمة.

أنشئ عمقًا بعدة طبقات

تبدو عدة ظلال خفيفة أكثر طبيعية من ظل واحد قوي. اجمع طبقة داكنة ضيقة لإظهار التلامس مع طبقة أنعم وأوسع لإظهار الارتفاع، أو راكم طبقات ملوّنة لصنع توهّج.

من المعاينة إلى CSS الجاهز للإنتاج

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

تعلّم وواصل البناء

ساعدنا في تحسين هذه الأداة

هل عملت الأداة كما توقعت؟

أرسل تقريرًا سريعًا مع لقطة شاشة أو ملف نموذجي. سيُملأ اسم الأداة تلقائيًا.