blur()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2016年9月⁩.

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

試してみましょう

filter: blur(0);

filter: blur(4px);

filter: blur(1.5rem);

<section>  <img          src="/shared-assets/images/examples/firefox-logo.svg"    width="200" /></section>

構文

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>    <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>    <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                   src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"          alt="Pride flag" />      </td>      <td>        <svg height="220" width="220">          <filter>            <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>