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>

svg:not([height]) {
  display: none;
}

<table cellpadding="5">
  <thead>
    <tr>
      <th>ライブサンプル</th>
      <th>同等の SVG</th>
      <th>元画像</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img
          class="filter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
      <td>
        <svg id="svg" height="220" width="220" style="overflow: visible">
          <filter id="svgBlur">
            <feGaussianBlur stdDeviation="3.5" />
          </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(#svgBlur)" />
        </svg>
      </td>
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
    </tr>
  </tbody>
</table>

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser