【css】だけで、画像をモノクロ（白黒）にして、ぼかしを入れる方法

カテゴリー︎： 【CSS】

cssだけで画像をモノクロ（白黒）にして、さらにぼかしをかけたい時に便利な技

元の画像（ねこちゃん）

まずは画像をモノクロ（白黒）にするcssコード

<style>
img {
  width: 240px;
}
.mono {
  /* 画像をモノクロにする */
  -webkit-filter: grayscale(1);
  filter: gray;
  filter: grayscale(1);
}
</style>
 
<p class="mono"><img src="neko.png"></p>

「モノクロ（白黒）」を反映
↓

次は画像にぼかしをいれるcssコード

<style>
img {
  width: 240px;
}
.blur {
  /* 画像にぼかしをいれる */
  filter: blur(3px);
}
</style>
<p class="mono"><img src="neko.png" class="blur"></p>

「ぼかし」を反映
↓

この２つをまとめてみる
画像をモノクロ（白黒）にしてぼかしをいれるcssコード

<style>
img {
  width: 240px;
}
.mono {
  /* 画像をモノクロにする */
  -webkit-filter: grayscale(1);
  filter: gray;
  filter: grayscale(1);
}
 
.blur {
  /* 画像にぼかしをいれる */
  filter: blur(3px);
}
</style>
<p class="mono"><img src="neko.png" class="blur"></p>

「モノクロ＋ぼかし」を反映
↓

こんな感じでcssだけで、簡単にモノクロ（白黒）にして、ぼかしをいれることができます

お試しください〜