مولّد ظلال CSS (Box Shadow)
مولّد ظلال CSS يتيح لك ضبط الإزاحة والتمويه والانتشار واللون والشفافية بصريًا مع معاينة حية، بالإضافة إلى خيار الظل الداخلي (Inset)، ثم نسخ كود box-shadow الجاهز.
أدوات التصميم وCSS يعمل محليًا بالكامل
تتم كل المعالجة داخل جهازك ولا يُرسل أي شيء لأي خادم.
كود CSS
box-shadow: 0px 8px 20px -2px rgba(0, 0, 0, 0.25);
ما الذي تفعله هذه الأداة
تبني ظلًا لعنصر بضبط الإزاحة الأفقية والرأسية ومقدار التمويه والانتشار واللون والشفافية، مع خيار الظل الداخلي، وتعطيك شيفرة CSS.
متى تستخدمها
- بطاقة أو زر يحتاج ظلًا يفصله عن الخلفية.
- تضبط ظلًا موجودًا تريده أنعم أو أوضح.
- ظل داخلي لحقل إدخال أو منطقة غائرة.
- توحّد الظلال عبر عناصر التصميم.
طريقة الاستخدام
- اضبط «الإزاحة الأفقية» و«الإزاحة الرأسية».
- اضبط «التمويه» و«الانتشار».
- اختر «اللون» و«الشفافية»، وفعّل «ظل داخلي» إن أردت.
- انسخ «شيفرة CSS».
مثال عملي
المُدخَل
إزاحة رأسية صغيرة مع تمويه متوسط وشفافية منخفضة.
الناتج
ظل خفيف طبيعي أسفل العنصر، بشيفرة CSS جاهزة.
الظل الطبيعي يأتي من إزاحة رأسية بسيطة وشفافية منخفضة؛ الظل القوي الأسود الحاد هو ما يجعل التصميم يبدو قديمًا.
حدود الأداة
- الظلال الكثيرة والقوية تثقل التصميم بصريًا وقد تؤثر على أداء العرض في الصفحات المزدحمة.
- الظل الداخلي يُرسم داخل حدود العنصر، فأثره مختلف تمامًا عن الخارجي.
- الأداة تولّد ظلًا واحدًا؛ الظلال المركّبة تحتاج دمج أكثر من قيمة يدويًا.
الخصوصية والمعالجة
الظل يُركَّب على جهازك ولا يُرسل شيء إلى خادم.
ملاحظات تقنية
- اللون والشفافية منفصلان في الواجهة لأن الظل الطبيعي يعتمد على لون شفاف لا على رمادي صلب.
الأسئلة الشائعة
نعم، يمكنك إضافة عدة طبقات من الظلال (Box Shadow متعدد) والتحكم في كل طبقة على حدة، تمامًا كما تدعم خاصية CSS نفسها.