Generator Box Shadow
Buat dan sesuaikan efek CSS box-shadow dengan pratinjau langsung dan kode siap salin.
Preset
Bayangan 1
Kode CSS
box-shadow: 0px 4px 6px -1px #00000033;Panduan Box Shadow Generator
Kapan alat ini berguna?
Gunakan box-shadow untuk membedakan lapisan antarmuka, misalnya kartu, dropdown, dan dialog. Offset menentukan arah bayangan, blur menghaluskan tepi, sedangkan spread memperbesar atau memperkecil bidang bayangan. Mulai dari nilai kecil agar elevasi tetap terbaca tanpa membuat tampilan terlalu berat.
Contoh penggunaan
Untuk kartu sederhana, coba offset horizontal 0, vertikal 8, blur 24, dan spread 0. Turunkan opacity sampai bayangan cukup halus pada latar halaman. Salin deklarasi CSS ke komponen, lalu bandingkan hasilnya dengan kartu di sekitarnya.
Batasan dan pemeriksaan hasil
Bayangan tidak menggantikan border pada latar dengan kontras rendah. Periksa apakah parent memakai overflow: hidden karena bayangan dapat terpotong. Jika komponen dianimasikan, ukur performanya pada perangkat target sebelum memakai blur besar di banyak elemen.