Fungsi blur CSS

Definisi dan Penggunaan

Fungsi blur CSS blur() Fungsi filter menerapkan efek blur pada elemen. Nilai yang lebih besar, efek blur lebih kuat.

Jika nilai tidak disebutkan, secara default digunakan 0.

Contoh

Contoh 1

Aplikasikan efek blur yang berbeda untuk elemen <h1> dan <img>:

h1 {
  filter: blur(2px);
}
#img1 {
  filter: blur(2px);
}
#img2 {
  filter: blur(6px);
}

Coba Sendiri

Contoh 2

Buat latar belakang blur:

img.background {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
  filter: blur(35px);
}

Coba Sendiri

Sintaksis CSS

blur(radius)

Detil Teknologi

Dukungan Browser

Angka di tabel menunjukkan versi browser yang pertama yang mendukung fungsi ini penuh.

Halaman yang berhubungan

Referensi：Atribut filter CSS

Referensi：Fungsi brightness() CSS

Referensi：Fungsi contrast() CSS

Referensi：Fungsi drop-shadow() CSS

Referensi：Fungsi grayscale() CSS

Referensi：Fungsi hue-rotate() CSS

Referensi：Fungsi invert() CSS

Referensi：Fungsi opacity() CSS

Referensi：Fungsi saturate() CSS

Referensi：Fungsi sepia() CSS