Generator CSS Box Shadow
Apa yang dilakukan alat ini
Sesuaikan offset X/Y, blur, spread, warna, dan opacity dengan slider dan lihat bayangan diperbarui secara langsung. Toggle Inset untuk beralih antara bayangan luar dan dalam. Tambahkan beberapa layer bayangan untuk efek kedalaman. Terapkan preset untuk memulai dengan cepat. Salin kode CSS dengan satu klik.
Cara penggunaan
- Pilih preset atau mulai dari default.
- Sesuaikan slider untuk offset, blur, spread, dan opacity.
- Klik swatch warna untuk mengubah warna bayangan.
- Toggle Inset untuk bayangan dalam. Gunakan + Tambah Layer untuk efek kedalaman.
- Klik Salin untuk menyalin CSS yang dihasilkan.
Pertanyaan yang Sering Diajukan
Apa itu CSS box-shadow?
Properti CSS `box-shadow` menambahkan efek bayangan di sekitar elemen. Sintaks lengkapnya `box-shadow: [inset] x-offset y-offset blur spread color`. Beberapa bayangan bisa ditumpuk dengan memisahkannya memakai koma.
Apa fungsi opsi Inset?
Saat Inset aktif, bayangan muncul di dalam elemen, bukan di luarnya. Efeknya terlihat seperti ditekan atau cekung, sering dipakai untuk cahaya dalam atau tombol dalam keadaan ditekan.
Apa itu nilai Spread?
Spread memperbesar atau memperkecil bayangan sebelum blur diterapkan. Nilai positif membuat bayangan lebih besar dari elemen, nilai negatif mengecilkannya. Spread 0 berarti ukuran bayangan sama dengan elemen.
Bagaimana membuat bayangan berlapis?
Klik '+ Tambah Layer' untuk membuat layer bayangan baru. Setiap layer punya pengaturan offset, blur, spread, warna, dan opacity sendiri. Layer digabung dengan koma di output CSS, format CSS standar yang didukung semua browser modern.
Apa bedanya box-shadow dan drop-shadow?
box-shadow berlaku pada kotak persegi batas elemen dan mengabaikan transparansi. `filter: drop-shadow()` mengikuti bentuk elemen yang terlihat (termasuk area transparan), sehingga lebih cocok untuk elemen tidak persegi seperti SVG atau PNG berlatar transparan.