Generator box shadow
Tumpuk beberapa lapisan halus agar bayangan terlihat alami, lalu salin CSS-nya.
Tersegel di perangkat ini
Berjalan di browser Anda. Tidak ada yang diunggah.
Tersegel
Pratinjau
Lapisan bayangan
Belum ada bayangan. Tambahkan lapisan untuk memulai.
Kode CSS
Cara kerjanya
-
Mulai dari preset
Pilih bayangan lembut, berlapis, melayang, tajam, atau dalam sebagai titik awal.
-
Atur lapisannya
Sesuaikan geser, blur, sebaran, warna, dan opasitas setiap lapisan, serta tambah atau hapus lapisan. Pratinjau langsung diperbarui.
-
Salin CSS-nya
Salin deklarasi box-shadow dan tempelkan ke stylesheet Anda.
Pertanyaan umum
Apa fungsi blur dan sebaran?
Blur melembutkan tepi bayangan: makin tinggi nilainya, makin menyebar bayangannya. Sebaran memperbesar atau memperkecil bayangan sebelum blur diterapkan. Sebaran negatif dengan blur besar memberi kesan lembut dan terangkat yang umum di antarmuka modern.
Mengapa memakai beberapa lapisan bayangan?
Bayangan nyata memiliki inti gelap dan rapat di dekat benda, serta lingkaran cahaya lembut dan lebar yang lebih jauh. Menumpuk satu lapisan kecil yang tajam dengan satu atau dua lapisan yang lebih besar dan lebih terang meniru efek itu dan terlihat jauh lebih alami daripada satu bayangan saja.
Apa itu bayangan inset?
Bayangan inset digambar di dalam elemen, bukan di luarnya. Efek ini membuat permukaan tampak tertekan ke dalam, cocok untuk kolom input atau tombol yang sedang ditekan.
Apakah bayangan ini berfungsi di semua browser?
Ya. box-shadow, banyak lapisan, dan sintaks warna rgb() yang dipakai dalam kode didukung oleh semua browser saat ini.
Apakah box shadow memperlambat halaman saya?
Bayangan statis ringan untuk digambar. Blur yang sangat besar pada banyak elemen, atau menganimasikan bayangan itu sendiri, bisa lebih berat. Untuk menganimasikan bayangan dengan mulus, ubah opasitas pseudo-element yang membawa bayangan tersebut.