← كل الأدوات
/ منشئ ظلال CSS (Box Shadow)
منشئ ظلال CSS (Box Shadow)
قم بإنشاء ظلال CSS جميلة بصرياً مع معاينة فورية وكود جاهز للنسخ.
توليد ظلال CSS مثالية وتفاعلية
يمكن أن تؤدي إضافة خاصية box-shadow للعناصر إلى تحويل التصميم المسطح تماماً إلى واجهة مستخدم حديثة وجذابة ذات عمق وارتفاع واقعي. ومع ذلك، فإن كتابة صيغة CSS يدوياً وتخمين قيم التمويه (Blur) والانتشار (Spread) والشفافية الصحيحة يتطلب الكثير من التجربة والخطأ.
يتيح لك منشئ ظلال CSS تعديل الإزاحات الأفقية/العمودية، ونصف قطر التمويه، والانتشار، وشفافية الظل بشكل مرئي في الوقت الفعلي. سواء كنت تهدف إلى الحصول على ظل خفيف وأنيق أو ظل درامي داخلي، يمكنك تحقيقه على الفور ونسخ كود CSS الذي تم إنشاؤه مباشرةً إلى مشروعك.
الأسئلة الشائعة
الصيغة القياسية هي: box-shadow: [إزاحة أفقية] [إزاحة عمودية] [تمويه] [انتشار] [لون]. ويمكن أن تتضمن أيضاً كلمة 'inset' لجعل الظل داخلياً ضمن العنصر.
يقوم نصف قطر الانتشار بتوسيع أو تقليص حجم الظل. تعمل القيمة الموجبة على زيادة حجم الظل مما يجعله أعرض من العنصر، بينما تعمل القيمة السالبة على تقليصه وجعله أصغر.
لإنشاء ظل طبيعي وعصري، قم بزيادة نصف قطر التمويه بشكل كبير (مثال: 20px - 30px) مع خفض شفافية لون الظل إلى درجة قليلة جداً (مثال: 0.05 - 0.15).