Penghasil Box Shadow
Generator Box Shadow menyusun CSS box-shadow dengan slider untuk offset X dan Y, blur, spread, warna, opacity, dan inset, plus preset Material Design dan Tailwind, lalu menghasilkan kode CSS yang persis.
Tentang alat ini
Generator Box Shadow menyusun CSS box-shadow dengan slider untuk offset X dan Y, blur, spread, warna, opacity, dan inset, plus preset Material Design dan Tailwind, lalu menghasilkan kode CSS yang persis.
Cara menggunakan
- Mulai dari preset atau biarkan di Custom.
- Atur offset X/Y, blur, spread, dan opacity.
- Pilih warna bayangan dan centang Inset untuk bayangan dalam.
- Klik Copy CSS untuk menempelkan aturan box-shadow.
Perlu diketahui
- Sintaks box-shadow adalah: [inset] offset-x offset-y blur-radius spread-radius color.
- Blur radius yang lebih besar melembutkan tepi; spread membuat bayangan membesar atau mengecil sebelum di-blur.
- Bayangan gelap dengan opacity rendah (sekitar 10–25%) terlihat lebih alami daripada hitam pekat.
- Beberapa bayangan bisa ditumpuk dengan memisahkannya menggunakan koma.
- Kata kunci inset menggambar bayangan di dalam border elemen.
Berjalan sepenuhnya di browser Anda — apa pun yang Anda masukkan tidak diunggah atau disimpan.
Pertanyaan umum
Bagaimana cara menambahkan bayangan ke div di CSS?
Gunakan properti box-shadow, misalnya box-shadow: 0 4px 12px 0 rgba(0,0,0,0.2); alat ini akan menuliskan nilainya untuk Anda.
Apa perbedaan blur dan spread?
Blur mengatur seberapa lembut tepi bayangan. Spread memperbesar atau memperkecil ukuran bayangan sebelum blur diterapkan.
Bagaimana cara membuat bayangan dalam?
Tambahkan kata kunci inset di awal nilai, atau centang Inset di alat ini.
Bisakah saya memakai beberapa box shadow sekaligus?
Bisa. Pisahkan setiap bayangan dengan koma; bayangan bertumpuk, seperti preset Material dan Tailwind, terlihat lebih realistis.