ساخت سایه CSS

با اسلایدر آفست، بلور، گسترش و رنگ، سایه‌ی دلخواه بسازید و کد CSS آن را کپی کنید.

box-shadow: 0px 10px 20px 0px rgba(99, 102, 241, 0.35);

ابزار ساخت سایه CSS با اسلایدرهای ساده، سایه‌ی دلخواه برای هر عنصر می‌سازد. عمق و برجستگی به کارت‌ها و دکمه‌های خود بدهید.

با اسلایدرهای آفست افقی و عمودی، بلور، گسترش و رنگ، سایه را تنظیم کنید و پیش‌نمایش زنده را ببینید و کد CSS را کپی کنید.

سایه‌ی درست باعث می‌شود عناصر از پس‌زمینه جدا و برجسته دیده شوند و رابط کاربری حرفه‌ای‌تر به نظر برسد.

طراحان وب برای ساخت کارت، دکمه و منو از این ابزار استفاده می‌کنند. برای افکت نرم و مدرن‌تر از ساخت افکت Neumorphism کمک بگیرید.

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

آفست افقی و عمودی چه می‌کنند؟

این دو مقدار تعیین می‌کنند سایه چقدر به راست/چپ و بالا/پایین عنصر جابه‌جا شود و جهت نور را شبیه‌سازی می‌کنند.

مقدار بلور یعنی چه؟

بلور نرمی لبه‌ی سایه را کنترل می‌کند؛ عدد بیشتر سایه را محوتر و طبیعی‌تر می‌کند.

می‌توانم چند سایه هم‌زمان بگذارم؟

بله، در CSS می‌توان چند سایه را با کاما به یک عنصر داد تا افکت‌های پیچیده‌تر ساخت.