Fungsi blur

Fungsi blur memungkinkan Anda mengaburkan gambar latar belakang menggunakan Gaussian blur.

Sintaks

selector {
	filter: blur(blur-radius);
}

Contoh

Mari kita atur blur untuk gambar kita sebesar 2px:

<div id="elem"></div>

#elem {
	filter: blur(2px);
	background-blend-mode: normal;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Lihat juga

fungsi brightness,
yang mengatur kecerahan latar belakang
fungsi contrast,
yang mengatur kontras latar belakang
fungsi drop-shadow,
yang mengatur bayangan untuk latar belakang
fungsi hue-rotate,
yang mengatur rona warna untuk latar belakang
fungsi invert,
yang membalikkan warna latar belakang
fungsi opacity,
yang mengatur transparansi latar belakang
fungsi sepia,
yang mengubah latar belakang menjadi sepia
properti background,
yang merupakan properti singkatan untuk latar belakang
properti background-image,
yang dapat digunakan untuk mengatur gambar latar belakang untuk blok
properti filter,
yang mengatur gaya untuk latar belakang