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>

構文

css

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

引数

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

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 フィルター定義 */

形式文法

<blur()> =
blur(<length>?)

例

この例では、 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;}th,td {  padding: 5px;}

<table>  <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" overflow="visible">          <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>