مولّد ظل CSS
جهّز box-shadow بلون وشفافية وحدود رقمية واضحة، مع خيار ظل داخلي ومعاينة محلية.
طريقة الاستخدام
- اضبط القيم والخيارات أو جرّب المثال.
- أنشئ الكود وراجع المعاينة أو الحسابات.
- انسخ النتيجة أو نزّلها وجرّبها داخل تصميمك.
التمويه والانتشار يؤثران في المظهر وحجم منطقة الرسم؛ اختبرهما داخل مكوّنك الفعلي.
فعّل JavaScript لاستعمال الأداة ومعالجة البيانات محلياً داخل متصفحك.
مثال يساعدك تبدأ
بيانات توضيحية. تتغير النتيجة عندما تتغير المدخلات أو الإعدادات.
- المدخلات
إزاحة أفقية 0 وعمودية 12px وتمويه 24px وانتشار 0.
- الإعدادات
اللون #1d392b بشفافية 0.22، والظل خارجي.
- النتيجة المتوقعة
box-shadow: 0px 12px 24px 0px rgba(29, 57, 43, 0.22).
متى تستعملها؟
- إزاحة أفقية 0 وعمودية 12px وتمويه 24px وانتشار 0. اللون #1d392b بشفافية 0.22، والظل خارجي.
- جهّز box-shadow بلون وشفافية وحدود رقمية واضحة، مع خيار ظل داخلي ومعاينة محلية.
أسئلة عن الأداة
ماذا تعالج أداة مولّد ظل CSS؟
جهّز box-shadow بلون وشفافية وحدود رقمية واضحة، مع خيار ظل داخلي ومعاينة محلية.
ما حدود النتيجة التي تنتجها؟
التمويه والانتشار يؤثران في المظهر وحجم منطقة الرسم؛ اختبرهما داخل مكوّنك الفعلي.