Cara menggunakan

Mulai dari preset atau sesuaikan offset, blur, spread, warna, dan opasitas lapisan pertama.
Tambahkan lapisan untuk kedalaman yang lebih alami, atau centang “Inset” untuk membuat bayangan ke dalam.
Sesuaikan latar belakang pratinjau dan warna kotak dengan desain Anda, lalu salin CSS.

Cara kerja

Untuk setiap lapisan, box-shadow menggunakan: offset horizontal, offset vertikal, radius blur, radius spread, dan warna; opsional diawali dengan inset. Offset positif menggeser bayangan ke kanan dan ke bawah. Blur melembutkan tepi dan tidak boleh bernilai negatif; spread memperbesar (positif) atau memperkecil (negatif) bayangan sebelum diburamkan. Beberapa lapisan dipisahkan dengan koma, dan lapisan pertama digambar paling atas.

Efek elevasi yang realistis biasanya menggabungkan bayangan kecil dan tajam dengan bayangan yang lebih besar dan lembut pada opasitas rendah, seperti yang dilakukan preset “Elevated”. Warna ditulis sebagai rgba() agar opasitas dinyatakan secara eksplisit. Bayangan mengikuti border-radius elemen dan tidak memakan ruang tata letak, sehingga tidak pernah menggeser elemen lain.

Bayangan dengan nilai blur yang sangat besar pada banyak elemen dapat memperlambat pengguliran di ponsel kelas bawah. Jika Anda menganimasikan bayangan, biasanya hasilnya lebih mulus dengan memudarkan pseudo-element yang sudah memiliki bayangan daripada menganimasikan box-shadow itu sendiri.

Contoh

Kartu di halaman terang

box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 8px 24px -4px rgba(0, 0, 0, 0.18); memberi kartu tepi yang tegas sekaligus efek terangkat yang lembut.

Cincin fokus tanpa menggeser tata letak

Lapisan dengan offset 0, blur 0, dan spread 3px dalam warna merek Anda akan membuat garis tegas di sekeliling tombol. Tidak seperti border, lapisan ini tidak mengubah ukuran elemen.

Kolom input tertekan

inset 0 2px 6px 0 rgba(0, 0, 0, 0.25) membuat kolom teks tampak sedikit cekung.

Pertanyaan yang sering diajukan

Apa perbedaan box-shadow dan filter: drop-shadow()?

box-shadow mengikuti kotak dan border-radius elemen serta mendukung spread dan inset. drop-shadow() mengikuti bentuk yang terlihat, termasuk area transparan pada gambar PNG atau SVG, tetapi tidak mendukung spread atau inset.

Mengapa bayangan saya terpotong?

Elemen induk dengan overflow: hidden akan memotong apa pun yang berada di luar kotaknya, termasuk bayangan. Tambahkan padding ke elemen induk atau pindahkan aturan overflow.

Berapa banyak lapisan yang sebaiknya digunakan?

Satu atau dua lapisan sudah cukup untuk sebagian besar antarmuka. Lebih banyak lapisan dapat membuat tampilan lebih halus, tetapi membutuhkan sedikit lebih banyak waktu untuk dirender, terutama pada daftar panjang.

Privasi

CSS dibuat di browser Anda. Tidak ada data yang diunggah atau disimpan.