Pembuat bayangan kotak CSS
Membuat nilai bayangan kotak secara visual. Atur offset horizontal dan vertikal dalam piksel, radius blur (tepi lembut), penyebaran (menambah atau mengecilkan bayangan sebelum buram), warna, opacity, dan inset opsional untuk bayangan bagian dalam.
Cara membuat bayangan kotak
1. Atur offset X dan Y — X positif memindahkan bayangan ke kanan, Y positif memindahkannya ke bawah.
2. Sesuaikan keburaman (kelembutan) dan penyebaran (ukuran sebelum keburaman).
3. Pilih warna bayangan dan opacity.
4. Alihkan inset jika bayangan muncul di dalam kotak; salin CSS.
Resep bayangan
Elevasi kartu lembut
offsetY 8px, blur 24px, spread 0, hitam pada opacity 18% — kartu mengambang bergaya Material: box-shadow: 0 8px 24px rgba(20,20,20,0.18).
Bayangan jatuh tajam
blur 0, spread 0, offsetY 4px — tepi keras seperti stiker terangkat sedikit dari halaman.
Inset tombol yang ditekan
Aktifkan inset dengan blur kecil — menyimulasikan kontrol yang ditekan atau tersembunyi di dalam elemen.
Kapan menggunakan alat ini
• Saat Anda menyesuaikan kedalaman UI untuk kartu, modals, dan tombol.
• Saat Anda mempelajari perbedaan keburaman dan penyebaran.
• Saat Anda mendokumentasikan token desain dengan nilai bayangan yang tepat.
Membaca empat angka
box-shadow: 0 8px 24px 0 berarti x=0, y=8px ke bawah, blur=24px, spread=0. Abaikan penyebaran dan penyebaran default browser ke 0. Keburaman besar dengan offset nol menciptakan cahaya; offset besar dengan keburaman kecil menciptakan cahaya terarah.
Pertanyaan yang sering diajukan
Apa sintaksis bayangan kotak?
box-shadow: offset-x offset-y blur-radius spread-radius color; Kata kunci inset opsional menghasilkan bayangan bagian dalam.
Blur vs. spread?
Blur memperhalus tepi bayangan. Spread memperluas atau mengecilkan bentuk bayangan sebelum kabur — spread positif memperbesar, menyusut negatif.
Unit apa yang harus saya gunakan?
Alat ini mengeluarkan piksel (px), pilihan paling umum untuk bayangan UI layar.
Apa yang dilakukan inset?
Inset menggambar bayangan di dalam kotak batas elemen — berguna untuk masukan yang tenggelam atau sumur.
Dapatkah warna bayangan menjadi semi-transparan?
Ya. Opacity diterapkan pada warna yang dipilih, menghasilkan keluaran rgba untuk tepian halus pada beragam latar belakang.