画像のキャプションなどをいい感じに装飾したい

　下の画像のように、イメージの上に磨りガラスのようないい感じのキャプションを重ねたい時ってありますよね。
　そんな時はbackdrop-filterを使いましょう。
　この記事を読むことでCSSのプロパティ、backdrop-filterを使いこなし、イカしたwebサイトを作りましょう！

![飯を食う.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384343/90e89b46-92e4-d3fe-541a-ae6b8fe87a89.png)

　読むのが面倒な方には便利なジェネレーターのご利用をオススメします。

backdrop-filterとは

　backdrop-filterはCSSのプロパティの１つで、要素の背後の領域に対してぼかしを加えたり、色を変化させたりといった、様々なエフェクトを与えることができます。filterプロパティとの違いは、要素の内側のテキストなどに影響を与えることなくエフェクトを適用することができるので、見出しやキャプションなどに最適です。

実装

　書き方は以下のようになります。

backdrop-filter: 値

値

　値は以下の10種類です。そんなにたくさん覚えられないよって方には便利なジェネレーターのご利用をオススメします。

blur(○○px)

　ぼかしの濃淡を調整することができます。数値（〇〇px）が大きいほどぼかしが濃くなります。

![blur.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384343/90710457-4037-bab7-8452-80ab3db465d3.png)

brightness(○○%)

　明度を調整することができます。数値（〇〇%）が小さいほど暗く、大きいほど明るくなります。

![brightness.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384343/87552e11-6d94-99e0-97bd-37eaa453d05e.png)

contrast(○○%)

　コントラストを調整することができます。数値（〇〇%）が大きいほど効果が強くなります。

![contrast.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384343/f4714924-3331-96a2-f4a3-007a25a2609b.png)

drop-shadow(○○px ○○px ○○px {color})

　要素に影を落とすことができます。

grayscale(○○%)

　グレーの濃淡を調整することができます。数値（〇〇%）が100%に近づくほど、色がグレーになります。

![grayscale.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384343/e3afae40-2ca8-7b3e-ac1d-88f1d30b8c00.png)

hue-rotate(○○deg)

　「赤」「青」「黄」「緑」などの色みを調整することができます。数値（〇〇deg）は自然界の虹色を環状につなげた色相環を表します。180degだと反対色、360degだと元の色に戻ります。

![hue-rotate.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384343/2c4e1b07-ad88-d2ea-41d1-8834265bf5bd.png)

invert(○○%)

　色の反転度合いを調整することができます。数値（〇〇%）が100%に達すると完全に色が反転します。

![invert.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384343/2d33c2a2-7441-035d-d44e-a83fd54ba501.png)

opacity(○○%)

　透明度を調整することができます。数値（〇〇%）が0%のときに完全に透明になります。単独だと効果がわからないので、他の値と組み合わせて使います。

![スクリーンショット 2021-01-25 16.14.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384343/35a218b0-32bb-cf20-d315-24d1306607a0.png)

sepia(○○%)

　セピア度合いを調整することができます。数値（〇〇%）が100%に達すると完全にセピアになります。ちなみにセピアは英語でイカ墨の意味です。

![sepia.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384343/6625821b-3618-ca65-a73e-b1a404aaec5e.png)

saturate(○○%)

　彩度を調整することができます。数値（〇〇%）が大きいほど、色が鮮やかになります。

![saturate.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384343/3ff1e6d0-ffc6-149c-8b9a-7911ffeee9d7.png)

値のミックス

　複数の値を組み合わせることもできます。

![mix.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384343/c87b8dd0-80f0-7620-a9b6-5e8acae9721b.png)

おわりに

　いかがでしたでしょうか。このように、backdrop-filterは少ない記述で画像にかっこいい装飾ができる大変便利なプロパティです。
　ただし、この記事を書いている時点（2021年1月）では、IEやfirefox(iOS版除く)は非対応となっておりますのでご注意ください。
　最後に、直感的な操作で簡単にbackdrop-filterのコードを生成できる便利なジェネレーターを作りましたので、是非ご利用ください。
　以上となります。最後まで読んでいただきありがとうございました。