# Desain bayangan CSS secara visual daripada menebak nilai
Menyesuaikan box-shadow secara manual itu membosankan. Generator visual ini memungkinkan Anda menumpuk beberapa bayangan, melihatnya langsung, dan menyalin CSS siap produksi. 5 Lapisan bayangan per elemen
Live Pratinjau setiap perubahan
5 Preset cepat
# Tumpuk beberapa bayangan untuk kedalaman realistis
Bayangan nyata jarang berupa blur seragam. Menumpuk bayangan ketat dekat elemen dengan yang lebih lembut dan lebar menciptakan kedalaman alami. Gunakan + untuk menambah lapisan.# Memahami setiap kontrol
| Kontrol | Nilai CSS | Efek |
|---|---|---|
| Offset X | Panjang ke-1 | Pergeseran horizontal. |
| Offset Y | Panjang ke-2 | Pergeseran vertikal. |
| Blur | Panjang ke-3 | Radius blur. |
| Sebaran | Panjang ke-4 | Memperbesar atau mengecilkan bayangan. |
| Warna & Opasitas | rgba() | Warna bayangan dengan opasitas independen. |
| Dalam | inset | Bayangan di dalam batas elemen. |
Gunakan kisi latar belakang yang halus
Area pratinjau menampilkan kisi titik agar Anda dapat melihat jangkauan bayangan. Gunakan spread negatif untuk membuatnya lebih rapat dengan elemen.Alur kerja yang direkomendasikan
Mulai dengan preset.
Tambahkan lapisan untuk kedalaman realistis.
Gunakan spread negatif untuk efek kartu mengambang.
Salin CSS yang dihasilkan dan tempel.