CSS Filter

【HTML/CSS】CSSで画像をぼかしたい

#HTML/CSS
writtdden by おちの

みなさん、こんにちは!

エンジニアのおちのです。

今回は、CSSで画像をぼかす方法を書いていきたいと思います。

ずばり、CSSfilterプロパティを使います。

こちらは画像をぼかす以外にも様々な設定が適用できるので、
合わせて見ていきたいと思います。

filterとは?

CSSのプロパティであるfilterは、画像や背景にグラフィック要素を適用するものです。
例えば、画像をぼかしたり、色味を変えたり、明るさを変えたり、
これらすべて、filterで適切な関数を設定することで可能となります。

では、表題の「画像をぼかす」を含む7つの関数を見ていきます。

blur():画像をぼかす

HTML

<img class="blur" src="gazou.jpg">

CSS

.blur {
  /* filter: blur(); ~px: ぼかす(にじませる)具合 */
  filter: blur(2px);
}

opacity():画像を透過する

HTML

<img class="opacity" src="gazou.jpg">

CSS

.opacity {
  /* filter: opacity(); 0: 元画像, 0~:ぼかし具合 */
  /* デフォルト: 0 */
  filter: opacity(0.4);
}

brightness():画像の明るさを調整する

HTML

<img class="brightness" src="gazou.jpg">

CSS

.brightness {
  /* filter: brightness(); 0:黒, 0~: 暗くする, 1:元画像、1~:明るくする */
  /* デフォルト: 1 */
  filter: brightness(1.5);
}

contrast():画像のコントラストを調整する

HTML

<img class="contrast" src="gazou.jpg">

CSS

.contrast {
  /* filter: contrast(); 0:グレー, 0~:コントラストを低くする, 1:元画像、1~:コントラストを高くする */
  /* デフォルト: 1 */
  filter: contrast(1.4);
}

drop-shadow():透過画像に影をつける

HTML

<img class="drop-shadow" src="gazou.png">

CSS

.drop-shadow {
  /* filter: drop-shadow(影をずらす大きさ(水平方向) 影をずらす大きさ(垂直方向) ぼかし具合 色); */
  filter: drop-shadow(10px 10px 3px rgba(119, 138, 156, 0.747));
}

grayscale():画像をグレースケールに変換する

HTML

<img class="grayscale " src="gazou.png">

CSS

.grayscale {
  /* filter: grayscale(); 0~1(完全グレースケール) */
  /* デフォルト: 0 */
  filter: grayscale(1);
}

sepia():画像をセピア調にする

HTML

<img class="sepia" src="gazou.png">

CSS

.sepia {
  /* filter: sepia(); 0~1(完全セピア調) */
  /* デフォルト: 0 */
  filter: sepia(1);
}

最後に

上記では1画像1関数としていますが、複数の関数の組み合わせも可能です。

filter: drop-shadow(10px 10px 3px rgba(119, 138, 156, 0.747)) grayscale(1);

以上となります。
最後まで読んでいただき、ありがとうございました!

【HTML/CSS関連】
CSSだけで星評価レーティングを作る方法
HTMLとCSSで吹き出しを作る
HTML×CSS×jQueryでハンバーガーメニューを作る

Favorite