CSS blur() 関数

定義と使用方法

CSSの blur() フィルタ関数は、要素にぼかし効果を適用します。値が大きいほど、ぼかし効果が強くなります。

値が指定されていない場合、デフォルトで 0 が使用されます。

インスタンス

例 1

<h1> と <img> 要素に異なるぼかし効果を適用します：

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

実際に試してみてください

例 2

ぼかし背景の作成：

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

実際に試してみてください

CSS 语法

blur(radius)

技術的詳細

ブラウザのサポート

テーブルの数字は、その関数を完全にサポートする最初のブラウザのバージョンを示しています。

関連ページ

参考：CSS filter 属性

参考：CSS brightness() 函数

参考：CSS contrast() 関数

参考：CSS drop-shadow() 関数

参考：CSS grayscale() 関数

参考：CSS hue-rotate() 関数

参考：CSS invert() 関数

参考：CSS opacity() 関数

参考：CSS saturate() 函数

参考：CSS sepia() 函数