By YOSHIDA NEKOHA in CSS — 2018年10月15日

CSS filter - 画像をぼかす

filter: 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);  
}

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