Cara memakai
- Atur Geseran horizontal dan Geseran vertikal lapisan pertama. Geseran vertikal yang positif memindahkan bayangan ke bawah.
- Naikkan Blur untuk melembutkan tepinya, dan Sebaran untuk membuat bayangan lebih besar atau lebih kecil daripada kotak.
- Pilih Warna dan Opasitas. Tambahkan lapisan lagi dengan Tambahkan lapisan untuk bayangan yang tampak lebih alami.
- Salin deklarasi CSS dan tempel ke aturan elemen Anda.
Cara nilai dibentuk
Properti box-shadow menerima satu atau lebih bayangan yang dipisahkan koma. Setiap bayangan ditulis sebagai kata kunci inset yang opsional, geseran horizontal dan vertikal, jari-jari blur, jarak sebaran dan sebuah warna. Bayangan pertama digambar di atas yang lain, dan tanpa bayangan nilainya none.
Jari-jari blur tidak pernah negatif. Blur yang lebih besar menyebarkan bayangan dengan lembut di area yang lebih luas; bayangan sebaran memperbesar atau memperkecil bayangan sebelum blur diterapkan. Opasitas ditulis sebagai nilai alfa dari warna rgba, dengan paling banyak dua desimal.
box-shadow: [inset] offset-x offset-y blur spread color, ...Lapisan dan yang diperiksa editor
Bayangan yang lembut dan alami sering memiliki dua lapisan: yang kecil dan gelap dekat kotak, dan yang lebih besar dan lebih terang di luarnya. Setiap lapisan adalah satu bayangan dalam nilai itu. Editor mengizinkan hingga 8 lapisan, geseran dan sebaran dari -200 sampai 200 piksel, blur dari 0 sampai 200 piksel, dan opasitas dari 0 sampai 100 persen.
Pratinjau memakai nilai yang sama dengan kodenya, jadi yang Anda lihat adalah yang digambar peramban. Blur dan sebaran yang sangat besar lebih lambat digambar di ponsel lama, sehingga gunakan nilai terkecil yang sudah cukup.
Contoh: kartu dengan dua lapisan
Lapisan pertama memiliki geseran 0 dan 4 piksel dengan blur 6 dan tanpa sebaran, berwarna hitam dengan opasitas 10 persen. Lapisan kedua memiliki geseran 0 dan 10 piksel dengan blur 20 pada 15 persen. Nilainya adalah 0px 4px 6px 0px rgba(0, 0, 0, 0.1), 0px 10px 20px 0px rgba(0, 0, 0, 0.15).
Jika ditempelkan ke sebuah kartu, hasilnya bayangan yang tajam di bawah kartu dan lembut lebih jauh ke bawah.
Pertanyaan yang sering diajukan
Apa yang dilakukan bayangan dalam (inset)?
Bayangan dalam digambar di dalam kotak, di sepanjang tepinya, seolah-olah kotak itu ditekan ke dalam. Ini berguna untuk kolom isian dan tombol yang ditekan. Sebuah kotak dapat memiliki bayangan dalam dan bayangan luar sekaligus.
Mengapa geseran memiliki tanda?
Geseran horizontal yang positif memindahkan bayangan ke kanan dan yang negatif ke kiri. Geseran vertikal yang positif memindahkannya ke bawah, sehingga bayangan yang jatuh di bawah kotak memiliki nilai positif.
Apa beda blur dan sebaran?
Blur melembutkan tepi bayangan sehingga memudar di area yang lebih luas. Sebaran membuat bayangan itu sendiri lebih besar, atau lebih kecil jika negatif, sebelum diburamkan. Blur tidak pernah di bawah nol, tetapi sebaran bisa.
Apakah CSS yang dihasilkan kompatibel dengan semua peramban?
Properti box-shadow tanpa awalan, dengan beberapa lapisan yang dipisahkan koma dan warna rgba, didukung oleh semua peramban masa kini dan sudah sejak bertahun-tahun. Deklarasinya dapat dipakai apa adanya, tanpa awalan vendor.
Apakah ada yang disimpan atau dikirim oleh editor?
Tidak. Bayangan digambar di peramban Anda dan tidak ada yang disimpan atau dikirim ke server kami. Salin CSS sebelum meninggalkan halaman, karena muat ulang akan memulai lagi dari bayangan awal.
Sumber
- W3C: CSS Backgrounds and Borders Module Level 3, box-shadow (dalam bahasa Inggris)
- MDN: box-shadow (dalam bahasa Inggris)
Angka dan teks terakhir diperiksa pada Selasa, 10 November 2026.