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. Kotak pratinjau diperbarui secara langsung; salin deklarasi box-shadow lengkap ke CSS Anda. Pahami bagaimana setiap parameter mengubah ketinggian dan kedalaman tanpa coba-coba di devtools.
X (px)
Y (px)
Blur (px)
Spread (px)
Warna
Opasitas (0–1)
CSS
box-shadow: 0px 8px 24px 0px rgba(20, 20, 20, 0.18);
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.
Kapan memilih sesuatu yang lain
• Saat Anda memerlukan beberapa bayangan bertumpuk — salin lapisan pertama di sini, lalu tambahkan selengkapnya dalam CSS.
• Bila Anda menginginkan bayangan teks — properti berbeda dengan sintaksis serupa.
• Saat Anda membutuhkan drop-shadow pada bentuk PNG tidak beraturan — filter: drop-shadow() mungkin berfungsi lebih baik.
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.
Melapisi bayangan
Beberapa bayangan yang dipisahkan koma: box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.15); Bayangan pertama melukis di bawah bayangan berikutnya. Gabungkan bayangan gelap pekat dengan bayangan terang lebar untuk kedalaman realistis.
Aksesibilitas dan kinerja
Bayangan tebal pada area animasi besar dapat menghabiskan waktu pengecatan GPU. Lebih memilih bayangan halus untuk UI padat data. Pastikan elemen fokus tetap terlihat — jangan hanya mengandalkan bayangan untuk menunjukkan keadaan; berpasangan dengan border atau outline untuk pengguna keyboard.
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.
Apakah nilai dikirim ke server?
Tidak. Pratinjau dan CSS bersifat lokal.
Apakah ini gratis?
Ya, tidak perlu akun.