Generator CSS Box Shadow
Buat CSS box-shadow secara visual: tumpuk beberapa lapisan, atur offset, blur, spread, inset, dan opasitas RGBA, lihat pratinjau langsung, lalu salin kodenya.
Preset
Lapisan
Pengaturan pratinjau
Pratinjau
box-shadow: 4px 6px 12px 0 rgba(0, 0, 0, 0.25);
Alat Terkait
Lihat SemuaApa itu Generator CSS Box Shadow?
Editor visual untuk properti CSS box-shadow. Anda dapat menumpuk beberapa lapisan bayangan, memberi setiap lapisan offset, blur, spread, warna, opasitas, dan tanda inset sendiri, lalu melihat hasilnya pada kotak contoh sementara alat ini menulis CSS yang sesuai.
Cara menggunakan Generator CSS Box Shadow
- Pilih preset (Lembut, Berlapis, Tegas, Berpendar, Dalam, Cincin) atau mulai dari bayangan default.
- Pilih sebuah lapisan lalu atur Geser horizontal, Geser vertikal, Blur, Sebaran, Warna bayangan, dan Opasitas; centang Ke dalam (inset) untuk bayangan dalam.
- Gunakan Tambah lapisan / Hapus lapisan untuk membuat bayangan berlapis; lapisan dicantumkan sesuai urutan penggambarannya.
- Ubah warna latar, warna elemen, dan radius di Pengaturan pratinjau untuk menilai bayangan dalam konteksnya.
- Salin kode CSS yang dihasilkan.
Contoh
One layer: x 10px, y -5px, blur 20px, spread 3px, color #3b82f6, opacity 1, Inset on
box-shadow: inset 10px -5px 20px 3px #3b82f6;
Kapan menggunakan Generator CSS Box Shadow
Gunakan untuk merancang elevasi kartu, focus ring, efek berpendar, atau bayangan dalam untuk elemen HTML apa pun. Untuk bayangan pada teks, gunakan Generator Text Shadow, dan untuk bayangan yang mengikuti bentuk PNG transparan atau elemen yang dipotong, gunakan filter: drop-shadow() (Generator CSS Filter), karena box-shadow selalu mengikuti border box elemen.
Cara kerja Generator CSS Box Shadow
Setiap lapisan menjadi satu nilai box-shadow dengan urutan [inset] x y blur spread color. Panjang ditulis dalam px (nol sebagai 0 tanpa satuan). Slider opasitas dikalikan dengan alpha warna itu sendiri: warna yang sepenuhnya buram ditulis sebagai hex, yang transparan sebagai rgba(r, g, b, a). Beberapa lapisan digabung dengan koma, satu per baris; lapisan pertama digambar paling atas. Blur tidak boleh negatif, sedangkan spread boleh.
Kasus Penggunaan Umum
- Elevasi berlapis ala Material untuk kartu dan modal
- Focus ring yang aksesibel dengan bayangan spread saja (0 0 0 3px)
- Bayangan dalam untuk tombol yang ditekan dan kolom input
- Efek pendar berwarna di sekitar tombol call-to-action
- Bayangan offset tegas untuk desain neo-brutalis
Pertanyaan Umum
Dalam urutan apa beberapa bayangan digambar?
Bayangan pertama dalam daftar digambar paling atas dan yang terakhir paling bawah. Alat ini menulis lapisan sesuai urutan yang ditampilkan di panel Lapisan.
Apa bedanya blur dan spread?
Blur melembutkan tepi bayangan (tidak boleh negatif). Spread memperbesar atau memperkecil bayangan sebelum di-blur; spread negatif membuat bayangan lebih kecil dari elemen.
Apakah saya masih butuh -webkit-box-shadow?
Tidak. box-shadow tanpa prefiks sudah didukung semua browser selama lebih dari satu dekade, jadi alat ini hanya menghasilkan properti standar.
Mengapa bayangan tidak muncul di sekitar gambar transparan saya?
box-shadow mengikuti kotak persegi elemen (termasuk border-radius), bukan piksel yang terlihat. Gunakan filter: drop-shadow() untuk itu.