Generator Box Shadow CSS Online
Buat CSS box shadow dengan pratinjau langsung. Beberapa lapisan, inset, blur, dan spread.
box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.2);
Mengapa menggunakannya
Bayangan CSS yang sempurna tanpa menebak nilai
Pratinjau instan
Sesuaikan offset, blur, spread, dan warna dengan slider. Hasilnya langsung terlihat.
Beberapa lapisan
Tumpuk bayangan untuk efek yang realistis. Tambah atau hapus lapisan dengan mudah.
Bayangan inset
Beralih antara bayangan luar dan dalam dengan satu klik.
Tanpa instalasi
Semua tersedia di browser. Tidak diperlukan alat desain eksternal.
Cara kerjanya
Tiga langkah, tanpa kerumitan
Konfigurasi bayangan Anda
Sesuaikan offset X, offset Y, radius blur, radius spread, dan warna menggunakan kontrol visual. Aktifkan inset untuk bayangan dalam.
Tambahkan beberapa bayangan
Properti box-shadow menerima beberapa bayangan yang dipisahkan koma. Gabungkan lapisan untuk menciptakan efek elevasi atau kedalaman yang realistis.
Salin CSS-nya
Kode box-shadow dihasilkan secara real time. Salin properti lengkap yang siap untuk stylesheet Anda.
FAQ
Ada pertanyaan?
Ya. Properti box-shadow menerima daftar yang dipisahkan koma: box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24). Bayangan dirender secara berurutan; yang pertama dalam daftar muncul di atas. Ini penting untuk bayangan multi-lapisan yang realistis, mengikuti prinsip bahwa bayangan alami memiliki komponen umbra (gelap dan tajam) dan komponen penumbra (difus dan lebar).
Kata kunci inset mengubah bayangan dari luar menjadi dalam. Alih-alih memancar ke luar dari elemen, bayangan muncul di dalam batasnya, menciptakan ilusi bahwa elemen tersebut tenggelam atau ditekan. Digunakan untuk mensimulasikan tombol yang ditekan, kolom input aktif, dan efek relief terbalik (seperti dalam desain neumorfisme).
Box-shadow dirender selama fase paint browser dan dapat memicu repaint yang mahal saat dianimasikan. Tidak seperti transform dan opacity (yang beroperasi di lapisan compositor tanpa repaint), menganimasikan box-shadow dapat menyebabkan penurunan frame. Tim Chrome merekomendasikan penggunaan filter: drop-shadow() sebagai gantinya untuk elemen yang memerlukan bayangan yang dianimasikan, atau menggunakan pseudo-element dengan opasitas yang dianimasikan untuk mensimulasikan efek dengan performa lebih baik.
text-shadow hanya berlaku untuk teks yang dirender, mengikuti kontur setiap glyph. box-shadow berlaku untuk model kotak elemen (border-box), sepenuhnya mengabaikan konten. Menerapkan box-shadow ke span teks menghasilkan bayangan persegi panjang (atau membulat jika elemen memiliki border-radius). Untuk bayangan yang mengikuti bentuk konten yang tepat (termasuk teks atau gambar transparan), gunakan filter: drop-shadow().
Bayangan realistis menggabungkan setidaknya dua lapisan: bayangan beropa tinggi dengan blur kecil untuk umbra, dan bayangan beropasitas rendah dengan blur besar untuk penumbra. Sistem elevasi Material Design Google mendefinisikan 24 level elevasi, masing-masing dengan nilai box-shadow yang spesifik. Misalnya, elevasi 8 (kartu mengambang) menggunakan: box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12).
CSS box-shadow: rendering, neumorfisme, dan elevasi Material Design
Properti box-shadow diperkenalkan dalam CSS3 (modul Backgrounds and Borders, W3C) dan mencapai dukungan penuh tanpa awalan pada tahun 2012. Sebelum CSS3, pengembang mensimulasikan bayangan dengan gambar PNG 9-irisan (nine-patch), teknik yang membutuhkan banyak bandwidth dan pemeliharaan. Sintaks box-shadow mendefinisikan, secara berurutan: offset-x, offset-y, blur-radius, spread-radius, dan warna, dengan kata kunci opsional inset. Parameter spread unik untuk box-shadow dan tidak memiliki padanan dalam filter: drop-shadow() atau text-shadow.
Rendering bayangan di browser modern menggunakan lapisan compositor. Ketika sebuah elemen memiliki box-shadow, browser mempromosikannya ke lapisan paint-nya sendiri untuk merender bayangan secara independen. Ini memiliki implikasi memori GPU: setiap lapisan tambahan mengonsumsi VRAM. Pada perangkat dengan VRAM terbatas (mobile kelas bawah), box-shadow yang berlebihan dapat menyebabkan penurunan frame. Alternatif filter: drop-shadow() menggunakan pipeline filter CSS, yang di Chrome diproses oleh GPU lebih efisien, meskipun perilakunya berbeda pada elemen dengan border-radius.
Neumorfisme, tren desain UI yang viral pada Desember 2019 setelah posting Dribbble oleh Alexander Plyuto, mengandalkan sepenuhnya pada box-shadow untuk menciptakan ilusi elemen yang diekstrusi dari latar belakang. Resep khas menggabungkan dua bayangan: bayangan terang (offset positif, seolah cahaya datang dari kiri atas) dan bayangan gelap (offset negatif). Sistem elevasi Material Design Google, yang didokumentasikan di material.io, mendefinisikan 24 level elevasi dengan nilai box-shadow yang dihitung secara matematis untuk mensimulasikan cahaya ambient dan langsung secara konsisten di seluruh antarmuka.