Box Shadow CSS

Properti box-shadow CSS

CSS box-shadow Atribut menerapkan bayangan pada elemen.

Penggunaan paling sederhana adalah hanya menentukan bayangan horizontal dan vertical:

Elemen <div> kuning dengan box-shadow hitam

Contoh

div {
  box-shadow: 10px 10px;
}

coba sendiri

Selanjutnya, tambahkan warna ke bayangan:

Elemen <div> kuning dengan box-shadow abu-abu

Contoh

div {
  box-shadow: 10px 10px grey;
}

coba sendiri

Selanjutnya, tambahkan efek blur ke bayangan:

Elemen <div> kuning, dengan box-shadow yang halus

Contoh

div {
  box-shadow: 10px 10px 5px grey;
}

coba sendiri

kartu

Anda juga dapat menggunakan box-shadow Efeクト kartu kertas:

1
January 1, 2021
Kopi
Kopi

Contoh

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

Coba Sendiri: Karedok KertasCoba Sendiri: Karedok Gambar

Properti Bayangan CSS

Tabel di bawah ini menampilkan properti bayangan CSS:

Properti Deskripsi
box-shadow Menambahkan satu atau lebih bayangan ke elemen.
text-shadow Menambahkan satu atau lebih bayangan di teks.