Atribut Properti backdrop-filter CSS

Definisi dan penggunaan

backdrop-filter Properti digunakan untuk menerapkan efek grafis untuk area di belakang elemen.

Tips:Untuk melihat efek, elemen atau latar belakangnya harus setidaknya sebagian berwarna transparan.

Contoh

Menambah efek grafis untuk area di belakang elemen:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

Coba sendiri

Syntaks CSS

backdrop-filter: none|filter|initial|inherit;

Nilai properti

Nilai Deskripsi
none Nilai default. Tidak menerapkan filter latar belakang.
filter

Daftar fungsi filter yang dipisahkan spasi, seperti:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • sepia()
  • saturate()

atau arah ke URL filter SVG.

initial Atur properti ini ke nilai default. Lihat initial.
inherit Mengambil properti ini dari elemen induknya. Lihat inherit.

Detil teknis

Nilai default: none
Inheritance: Tidak
Pembuatan animasi: Dukungan. Lihat:Properti yang berhubungan dengan animasi.
Versi: CSS3
Syntaks JavaScript: object.style.backdropFilter="grayscale(100%)"

Dukungan browser

Angka di tabel menunjukkan versi pertama penggunaan penuh properti ini.

Angka dengan prefiks -webkit- menunjukkan versi pertama yang mendukung prefiks ini.

Chrome Edge Firefox Safari Opera
76 79 103 9 -webkit- 63

Halaman yang berhubungan

Tutorial:Gambar CSS

Referensi:Atribut filter CSS

Referensi:Filter Properti DOM HTML