CSS blur() 関数 - CSS

試してみましょう

filter: blur(0);

filter: blur(4px);

filter: blur(1.5rem);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    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 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 フィルター定義 */

形式文法

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

例

この例では、 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;
}

th,
td {
  padding: 5px;
}

<table>
  <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" 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>