blur関数

関数blurは、ガウスぼかしを背景画像に適用できます。

構文

セレクタ {
	filter: blur(ぼかしのサイズ);
}

例

画像に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;
}

関連項目

関数brightness、
背景の明るさを設定します
関数contrast、
背景のコントラストを設定します
関数drop-shadow、
背景に影を設定します
関数hue-rotate、
背景の色相を設定します
関数invert、
背景色を反転させます
関数opacity、
背景の不透明度を設定します
関数sepia、
背景をセピア調に変換します
プロパティbackground、
背景に関するプロパティの一括指定です
プロパティbackground-image、
ブロックに背景画像を設定できます
プロパティfilter、
背景のスタイルを設定します