سازنده Box Shadow

اسلایدرها را برای ایجاد سایه بکشید، برای عمق بیشتر لایه‌ها را روی هم قرار دهید و کد CSS نهایی را فوراً کپی کنید.

لایه‌های سایه
لایه 1
CSS
اسلایدرها را برای تنظیم شکل سایه تغییر دهید.

تمام سایه‌ها در مرورگر شما رندر می‌شوند. هیچ‌یک از مقادیر تنظیمی شما در BroBroGo آپلود نخواهد شد.

سوالات متداول

مقادیر offset، blur و spread دقیقاً چه چیزی را کنترل می‌کنند؟

مقدار Offset سایه را به چپ/راست و بالا/پایین حرکت می‌دهد، Blur لبه‌های آن را نرم می‌کند و Spread قبل از اعمال محوشدگی، سایه را بزرگتر یا کوچکتر می‌کند. مقدار منفی برای spread سایه را به داخل جمع می‌کند که برای ایجاد سایه‌های متمرکز و نزدیک بسیار مفید است.

گزینه inset چه کاری انجام می‌دهد؟

یک سایه معمولی در بیرون عنصر قرار می‌گیرد، مانند نوری که پشت یک کارت برجسته می‌تابد. حالت Inset سایه را به داخل عنصر منتقل می‌کند تا عنصر فرورفته به نظر برسد — این حالت برای فیلدهای ورودی فرورفته یا دکمه‌های فشرده‌شده بسیار کاربردی است.

چرا باید بیش از یک لایه سایه ایجاد کنیم؟

یک سایه تک‌لایه در ابعاد بزرگ معمولاً تخت و مصنوعی به نظر می‌رسد. برجستگی‌های واقعی در دنیای واقعی معمولاً ترکیبی از یک سایه تیره و متمرکز با یک سایه نرم و عریض‌تر هستند — یک لایه دوم اضافه کنید و هر کدام را به طور مستقل تنظیم کنید تا به این افکت طبیعی دست یابید.