blur()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

blur() は CSS の関数で、入力画像にガウシアンぼかしを適用します。返値は <filter-function> です。

試してみましょう

構文

css
blur(radius)

引数

radius

ぼかしの半径で、 <length> で指定します。ガウス関数の標準偏差の値を定義します。つまり、画面上のピクセルをいくつ互いに混合するかということです。すなわち、大きい値になるほどよりぼかしが入ります。 0 の値は入力を変更しません。補間時の欠損値は 0 です。

例

ピクセル数と rem を用いた blur の設定

css
blur(0)        /* 効果なし */
blur(8px)      /* 半径 8px でぼかす */
blur(1.17rem)  /* 半径 1.17rem でぼかす */

仕様書

Specification
Filter Effects Module Level 1
# funcdef-filter-blur

ブラウザーの互換性

BCD tables only load in the browser

関連情報