سازنده سایه CSS (box-shadow)
روی دستگاه شما اجرا می‌شود. چیزی ارسال نمی‌شود.همه‌چیز در مرورگر شما اجرا می‌شود - هیچ چیزی ارسال نمی‌شود.
شروع از
لایه‌ها
جابه‌جایی افقی
جابه‌جایی عمودی
محوشدگی
گسترش
رنگ
کد
CSS
box-shadow:
0 10px 15px -3px rgb(15 23 42 / 0.1),
0 4px 6px -4px rgb(15 23 42 / 0.1);Tailwind CSS
shadow-[0_10px_15px_-3px_rgb(15_23_42_/_0.1),0_4px_6px_-4px_rgb(15_23_42_/_0.1)]ویرایش سایه موجود
سایه‌های CSS را با لایه، سایه داخلی و پیش‌تنظیم‌های نرم طراحی کنید، زنده ببینید و CSS یا کلاس Tailwind را کپی کنید. سایه موجود را بچسبانید و ویرایش کنید.
سایه دلخواهتان را با چشم بسازید، نه با حدس زدن عددها. از یک پیش‌تنظیم شروع کنید - نرم، متوسط، تند رترو، نرم چندلایه، شناور، داخلی، نئومورفیک یا درخشش - سپس جابه‌جایی، محوشدگی، گسترش، رنگ، کدری و inset هر لایه را دقیق تنظیم کنید؛ پیش‌نمایش هم‌زمان به‌روز می‌شود. هر سایه می‌تواند تا هشت لایه داشته باشد و طبیعی‌ترین سایه‌ها همین‌طور ساخته می‌شوند. نتیجه را به‌صورت CSS یا کلاس Tailwind کپی کنید، با پیوند به اشتراک بگذارید یا box-shadow شیوه‌نامه‌تان را بچسبانید و روی آن کار کنید.
پرسش‌های متداول
محوشدگی و گسترش چه می‌کنند؟
محوشدگی لبه سایه را نرم می‌کند: ۰ یک خط تیز است و مقادیر بزرگ‌تر آن را در پیکسل‌های بیشتری محو می‌کنند. گسترش، سایه را پیش از محو شدن بزرگ (مثبت) یا کوچک (منفی) می‌کند - گسترش منفی کوچک با محوشدگی زیاد همان سایه‌های نرم و جمع‌شده رابط‌های امروزی است.
چرا چند لایه؟
سایه واقعی نزدیک جسم تیره و تیز است و دورتر روشن‌تر و نرم‌تر. یک لایه نمی‌تواند هر دو را نشان دهد؛ روی هم گذاشتن چند لایه با جابه‌جایی و محوشدگی دوبرابرشونده، مثل پیش‌تنظیم «نرم چندلایه»، بسیار طبیعی‌تر است.
سایه inset چیست؟
سایه inset درون جعبه کشیده می‌شود نه بیرون آن، پس جعبه فرورفته به نظر می‌رسد - برای فیلدهای ورودی، فرورفتگی‌ها و دکمه‌های فشرده مناسب است. می‌توانید لایه‌های داخلی و بیرونی را در یک سایه ترکیب کنید.
آیا box-shadow صفحه را کند می‌کند؟
چند سایه هزینه چندانی ندارد. محوشدگی بسیار زیاد روی عناصر فراوان یا متحرک کردن خود box-shadow ممکن است نرخ فریم را در گوشی‌های کند پایین بیاورد؛ برای انیمیشن، کدری یک شبه‌عنصر را که از قبل سایه دارد تغییر دهید.