backdrop-filterでホームページの写真にPhotoshopのようなエフェクトを追加

こんにちは！
CSSのbackdrop-filterプロパティは、写真に様々なエフェクト（効果）をつけることができます。同じCSSのfilterプロパティと似ていますが、backdrop-filterは、内側のテキストやその他の要素を変更することなく、背景の要素だけにエフェクト（効果）のぼかしなどを適用することができます。

文章で説明してもわかりにくいのですが、今回はbackdrop-filterで何が出来るかご紹介します。

backdrop-filterの使い方

backdrop-filterプロパティを記述するだけで、エフェクト（効果）を追加できます。

div {
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}

各種ブラウザ対応状況

FireFox以外のほとんどの主要ブラウザでは使用できす。下記のリンク先をご確認ください。


参考：https://caniuse.com/#feat=c

10種類のbackdrop-filterのエフェクト（効果）

backdrop-filterでは以下のようなエフェクト（効果）がかけられます。

blur：ぼかし（pxで指定）
brightness：明るさ（％で指定）
contrast：コントラスト（％で指定）
grayscale：モノトーン（％で指定）
invert：階調反転（％で指定）
hue-rotate：色相（degで指定）
opacity：不透明度（％で指定）
sepia：セピア調（％で指定）
saturate：彩度（％で指定）
drop-shadow：ドロップシャドウ（pxで指定）

ぼかし：blur
div {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}




明るさ：brightness
div {
backdrop-filter:brightness(170%);
-webkit-backdrop-filter:brightness(170%);
}




コントラスト：contrast
div {
backdrop-filter: contrast(200%);
-webkit-backdrop-filter: contrast(200%);
}




モノトーン：grayscale
div {
backdrop-filter: grayscale(200%);
-webkit-backdrop-filter: grayscale(200%);
}



階調反転：invert
div {
backdrop-filter: invert(70%);
-webkit-backdrop-filter: invert(70%);
}



色相：hue-rotate
div {
backdrop-filter: hue-rotate(120deg);
-webkit-backdrop-filter: hue-rotate(120deg);
}


不透明度：opacity
div {
backdrop-filter: opacity(65%);
-webkit-backdrop-filter: opacity(65%);
}


セピア調：sepia
div {
backdrop-filter: sepia(65%);
-webkit-backdrop-filter: sepia(65%);
}


彩度：saturate
div {
backdrop-filter: saturate(50%);
-webkit-backdrop-filter: saturate(50%);
}


ドロップシャドウ：drop-shadow
div {
backdrop-filter: drop-shadow(4px 4px 10px black);
-webkit-backdrop-filter: drop-shadow(4px 4px 10px black);
}

まとめ

以上が、backdrop-filterを使ったエフェクト（効果）のかけ方となります。主要なブラウザはほとんどないのが対応していますので、Photoshopや画像編集ソフトがなくてもお手軽にエフェクト（効果）がかけられるので、とても便利ですね。ホームページを制作した際に、簡単なエフェクト（効果）を写真にかけたいなと思って今回のbackdrop-filterを思い出したら、是非使ってみてください。

使い方次第で、半透明のガラスのような表現もできますよ。