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> です。

試してみましょう

構文

blur() 関数は、適用された要素にガウスぼかしを適用します。

css
blur(radius)

引数

radius

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

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

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

SVG フィルター

SVG の <feGaussianBlur> フィルター要素もコンテンツをぼかすために使用することができます。このフィルターの stdDeviation 属性は最大 2 つの値を受け入れ、より複雑なぼかし値を作成することができます。同等のぼかしを作成するには、 stdDeviation に 1 つの値を記載します。この SVG 効果は ID で参照することができます。

html
<svg role="none">
  <filter id="blur11">
    <feGaussianBlur stdDeviation="1.1" edgeMode="duplicate" />
  </filter>
</svg>

次の宣言は同じ効果をもたらします。

css
filter: blur(1.1px);
filter: url(#blur11); /* 埋め込み SVG による */
filter: url(folder/fileName.svg#blur11); /* 外部の SVG フィルター定義 */

この例では、 3 つの画像を表示させています。 blur() フィルター関数を適用した画像、同等の SVG blur 関数を適用した画像、そして比較用の元画像です。

css
.filter {
  filter: blur(3.5px);
}
html
<svg role="img" aria-label="Flag">
  <filter id="blur">
    <feGaussianBlur stdDeviation="3.5" edgeMode="duplicate" />
  </filter>
  <image
    href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
    xlink:href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
    filter="url(#blur)" />
</svg>

仕様書

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
blur()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報