【iOS風】CSSだけで画像に曇りガラスのエフェクトをかける方法

今回はCSSだけでできる、iOS風の曇りガラスのエフェクトの掛け方を紹介します。

 

曇りガラスのエフェクト

CSSだけで曇りガラスみたいなエフェクトをかけるには、backdrop-filterプロパティを使います。

値はたくさんありますが、曇りガラスなら以下のように指定すればokです。

.sample {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}

 

blurの値を大きくするとよりぼかすことができます。

背景が1色だと見た目に変化はありませんが、画像や別の色が指定されているとわかりやすいかと思います。

また、古いブラウザではサポートされていないプロパティなので、ベンダーインプレックスは必須です。

 

backdrop-fileterの値

backdrop-filterには以下のような値があります。

  • backdrop-filter: none;→指定なし(初期値)
  • backdrop-filter: grayscale(1);→グレースケールに変換
  • backdrop-filter: brightness(1.5);→明度を調整する
  • backdrop-filter: blur(5px);→背景をぼかす。曇りガラスっぽくできる
  • backdrop-filter: contrast(.8);→コントラストを調整
  • backdrop-filter: invert(.7);→色相を反転
  • backdrop-filter: opacity(.4);→透明度を調整
  • backdrop-filter: sepia(.4);→セピア調に変換
  • backdrop-filter: saturate(1.8);→彩度を調整
  • backdrop-filter: hue-rotate(120deg);→色彩を反転

 

backdrop-filterのブラウザサポート

backdrop-filterはFirefoxとIEではサポートされていません。

webkit系のブラウザでもベンダーインプレックスが必要なので、古いブラウザまで対応しないといけない場合はあまり使わない方がいいかもしれません。

backdrop-filterのブラウザサポート

 

まとめ

iOS風の曇りガラスのエフェクトはcssのbackdrop-filterプロパティで簡単に実装できます。

見た目もかなりオシャレになるので使ってみたくなりますね。