CSS filter - 画像をぼかす
create: 2018-10-15
CSS Filter

filter: blur で画像をぼかす

画像をぼかしてみます。

blur 関数

ねこ画像にblur関数でぼかしをかけてみます。
関数への引数はぼかしの半径です。10px でもかなりボケますね。em%などの相対指定も可能です。

<img class="blur" src="/images/site/cat.svg" title="SVGねこ" />
/* filterでぼかし */
.filter-blur {
  filter: blur(10px);
}
.filter-blur:hover {
  filter: blur(0px);
}

filter:blur リファレンス

MDN のサイトが参考になります。
blur()

ねこ画像 by 素材 Library.com, Thanks!!