こんにちは！雪乃です。
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=css-backdrop-filter
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を思い出したら、是非使ってみてください。
使い方次第で、半透明のガラスのような表現もできますよ。