Tumpuk layer bayangan dengan slider offset, buram, sebar, warna, dan inset, pratinjau di terang atau gelap, lalu salin CSS-nya.
Bayangan dibuat secara lokal di browser Anda. Tidak ada yang meninggalkan perangkat.
Nilai box-shadow terdiri dari lima bagian dengan urutan tetap: offset-x (geser horizontal, positif ke kanan), offset-y (positif ke bawah), radius buram (seberapa lebar tepi mengabur; 0 memberi siluet tajam), spread (mengecilkan atau membesarkan bayangan sebelum diburamkan —negatif melipat ke dalam, positif mengembungkan), dan warna, yang di sini dibentuk dari rona pilihan ditambah slider transparansi yang menjadi alfa rgba(). Keyword inset membalik semuanya agar dilukis di dalam border-box, bukan di belakangnya.
Untuk cincin 1px yang tidak boleh mengubah ukuran kotak, trik bayangan menang: inset 0 0 0 1px menggambar garis di dalam border-box tanpa dampak tata letak, sehingga padding, lebar, dan border-radius persis seperti rancangan. Border sungguhan menambah kotak elemen (bahkan dengan border-box ia memakan ruang isi) dan menggeser isi setebal garisnya. Bayangan juga mengikuti transform dan zoom tanpa reflow.
Tidak — box-shadow selalu membayangi kotak border-box yang persegi, bukan siluet alfa gambar, jadi bentuk potongan mendapat bayangan berbentuk kotak di belakangnya. Properti saudaranya untuk tugas itu adalah filter: drop-shadow(8px 8px 6px rgba(0,0,0,0.4)) yang mengikuti piksel terlihat pada gambar dan SVG. Properti ini tidak menerima spread dan selalu duduk di belakang elemen, tetapi untuk stiker dan logo inilah alat yang tepat.
text-shadow mengecat salinan bentuk glif, bukan kotak: ia menerima offset-x, offset-y, dan buram, tetapi tidak punya keyword spread sama sekali, dan bisa ditumpuk dengan koma untuk efek pijaum seperti 0 0 8px. Ia mengikuti teksnya sendiri —termasuk ::first-line dan ::first-letter—, karena itu CSS dari generator ini tidak akan menggerakkan bayangan teks yang sudah Anda punya.
Menganimasikan box-shadow secara langsung memaksa repaint tiap frame, jadi hover pada beberapa elemen tidak masalah, tetapi daftar panjang bayangan beranimasi bisa menurunkan frame rate di perangkat lemah. Optimasi klasiknya adalah pseudo-elemen memegang bayangan tujuan, ditransisikan dengan opacity, yang sering bisa dikomposit browser. Jumlah layer buram lebih berpengaruh daripada jaraknya: tiga layer lembut bertumpuk tetap lebih murah daripada satu bayangan yang Anda tween tiap frame.
Tidak. Setiap bayangan dihitung di browser Anda dari posisi slider dan diserahkan ke clipboard sebagai CSS biasa. Tidak ada akun, penyimpanan, atau permintaan jaringan, dan halaman tetap jalan tanpa koneksi.
Jika Anda baru saja memakai Generator Box Shadow, langkah berikutnya yang wajar adalah Generator Border Radius, Konverter warna, Konverter HEX ke RGB, atau telusuri semua alat Alat harian.