Generator CSS Box Shadow
Buat CSS box-shadow berlapis dengan slider langsung untuk offset, blur, spread, warna, opasitas, dan inset — pratinjau pada elemen nyata dan salin CSS siap pakai seketika.
box-shadow: —;
Semuanya diperbarui secara langsung di browser Anda — tidak ada unggahan, tidak perlu daftar, sepenuhnya gratis.
Tentang Generator CSS Box Shadow
CSS Box Shadow Generator memungkinkan Anda merancang box-shadow secara visual alih-alih menebak-nebak nilai dalam kode. Geser slider untuk offset horizontal dan vertikal, radius blur, radius spread, warna dan opasitas — dengan toggle inset — dan lihat elemen sungguhan diperbarui secara langsung. Saat sudah pas, salin CSS siap-tempel dengan satu klik.
Bayangan UI modern jarang berupa satu lapisan tunggal. Generator ini mendukung lapisan bayangan bertumpuk: tambah, duplikasi, sembunyikan atau hapus lapisan, dan pratinjau baik lapisan yang dipilih saja maupun semua lapisan sekaligus. Menumpuk bayangan gelap yang rapat di bawah bayangan lebar yang lembut adalah cara kartu dan tombol yang rapi mendapatkan kedalamannya.
Anda juga bisa menata elemen pratinjau itu sendiri — warna kotak, radius border dan background kanvas — sehingga bayangan dinilai dalam konteks yang realistis, termasuk permukaan gelap. Mulai dari preset, tekan "Acak lapisan" untuk inspirasi, dan reset kapan pun Anda ingin memulai bersih. Semuanya berjalan di browser Anda.
Cara menggunakan Generator CSS Box Shadow
- Sesuaikan slider untuk offset horizontal, offset vertikal, blur, spread, warna dan opasitas, dan aktifkan "Bayangan inset" jika Anda menginginkan bayangan dalam.
- Klik "Tambah lapisan" atau "Duplikasi lapisan" untuk menumpuk bayangan, dan alihkan mode pratinjau antara "Lapisan ini" dan "Semua lapisan" untuk menyempurnakan masing-masing.
- Sesuaikan elemen dan kanvas — warna kotak, radius border dan background — agar pratinjau cocok dengan desain nyata Anda.
- Terapkan preset atau gunakan "Acak lapisan" jika Anda menginginkan titik awal alih-alih kumpulan slider kosong.
- Salin aturan CSS lengkap (atau hanya nilainya) dan tempelkan ke stylesheet Anda.