Generator Bayangan Kotak CSS

Sintaks box-shadow

box-shadow: <x-offset> <y-offset> <blur> <spread> <colour> [inset];

• x-offset: nilai positif = ke kanan, nilai negatif = ke kiri.
• y-offset: nilai positif berarti ke bawah, nilai negatif berarti ke atas.
• Blur: 0 = tepi tajam; nilai yang lebih tinggi = tepi yang lebih lembut. Ukuran yang terlihat kira-kira 1,5 kali nilai blur di luar elemen.
• Spread: ukuran tambahan di luar elemen. Nilai positif memperbesar bayangan, sedangkan nilai negatif memperkecilnya (berguna untuk menghasilkan efek halo yang halus).
• warna: mendukung semua warna CSS. rgba(0, 0, 0, 0.15) merupakan pilihan utama yang paling umum digunakan.
• inset: kata kunci yang membalikkan bayangan di dalam elemen.

Bayangan berlapis terlihat nyata

Generator ini menghasilkan satu aturan bayangan dalam satu waktu; untuk membuat bayangan berlapis, hasilkan setiap lapisan terpisah lalu gabungkan aturannya dengan koma.

Satu bayangan dengan 0 0 40px terlihat kabur. Dua bayangan, yakni bayangan kecil yang tajam di dekat elemen dan bayangan lebih besar yang lembut di sekitarnya, menggambarkan cara cahaya nyata tersebar.

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.08),
  0 4px 12px rgba(0, 0, 0, 0.08);

Baris pertama menampilkan bayangan kontak yang padat, sedangkan baris kedua menampilkan lingkungan sekitar yang lebih lembut. Pola tunggal ini mencakup 80% dari antarmuka tipe kartu.

Sistem elevasi

Material Design menggunakan enam tingkat elevasi, masing-masing dengan susunan bayangan yang berbeda. Secara sederhana:

Pilih satu untuk setiap peran elevasi dan gunakan secara konsisten.

Bayangan berwarna terlihat lebih alami

Bayangan hitam murni terasa tidak alami karena bayangan sebenarnya memiliki warna yang ditentukan oleh permukaan di bawahnya. Coba:

box-shadow: 0 12px 24px rgba(40, 80, 120, 0.18);

• warna biru-abu yang sejuk, bukan hitam murni. Pada latar belakang hangat, gunakan nuansa yang lebih hangat.

Kinerja

Bayangan kotak dibuat setiap kali dilakukan penggambaran ulang. Bayangan yang besar dan tebal pada banyak elemen dapat memperlambat proses gulir. Langkah-langkah mitigasi:

• Gunakan transform: translateZ(0) pada elemen untuk memaksa pembuatan lapisan komposit.
• Gantilah bayangan kompleks dengan filter: drop-shadow() hanya jika Anda memerlukan bayangan yang mengikuti clip-path (prosesnya umumnya lebih lambat).
• Batasi bayangan pada elemen yang sering dirender ulang.

Inset untuk keadaan ditekan

.button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12);
}

Bayangan inset memberikan kesan cekungan ke dalam permukaan, tombol terlihat seolah-olah ditekan ke dalamnya. Gabungkan dengan transform: translateY(1px) kecil ke bawah untuk mendapatkan sensasi klik yang terasa nyata.