Ada masalah dengan alat ini?
Tentang «CSS Box Shadow Generator Online»
Alat ini membangun nilai CSS box-shadow secara visual dengan slider untuk offset, blur, spread, warna, dan opasitas. Anda melihat bayangan diperbarui secara real-time dan menyalin CSS yang cocok setelah Anda puas dengannya.
Bayangan kotak menambah kedalaman, memisahkan elemen dari latar belakang, dan menandakan interaktivitas (status hover, status ditekan, elemen yang difokuskan). Bayangan multi-lapisan dapat mensimulasikan pengaturan pencahayaan kompleks seperti elevasi Material Design atau efek neumorphic.
Gunakan untuk kartu, modal, popover, tombol, dan elemen UI apa pun yang membutuhkan pengangkatan visual. Generator dapat menghasilkan box-shadow klasik, beberapa lapisan bayangan, dan kombinasi offset/blur modern.
Cara memakai alat ini
Cara merangkai deklarasi CSS box-shadow
Offset
"X offset (px)" dan "Y offset (px)" menggeser bayangan horizontal (positif = kanan) dan vertikal (positif = bawah). Default CSS tanpa offset; bayangan kartu umum pakai Y `4`-an dan X dekat 0.
Blur dan warna
"Blur (px)" mengatur kelembutan — 0 = bertepi keras, 10+ = berkabut. "Color" menerima warna CSS apa pun, termasuk rgba/hex dengan alpha. Untuk bayangan UI halus pakai `rgba(0,0,0,0.15)` dengan blur sedang.
Tekan Jalankan
Hasil: satu field `css` — `<x>px <y>px <blur>px <color>`. Tempel sebagai nilai `box-shadow:`. Spread atau inset tidak dikeluarkan; sintaksnya mendukung tapi alat ini hanya 4 argumen.
Beberapa bayangan bertumpuk
Desain nyata sering menumpuk 2-3 bayangan dipisah koma (panjang lembut + pendek rapat) untuk kedalaman. Hasilkan masing-masing dengan alat, lalu gabungkan manual dengan koma di satu nilai `box-shadow:`.