[CSS] backdrop-filterで要素の背後のグラフィック効果を指定しよう!

1.backdrop-filterとは?

backdrop-filterプロパティは要素の背後の領域に適用するぼかしや色変化などのグラフィック効果を指定します。

値の指定方法は以下の通りです。

{ backdrop-filter: 値; }

値の指定方法

基本的に値の指定方法はfilterプロパティと同じです。

2.backdrop-filterの使い方

それではbackdrop-filterの使い方をみていきましょう。

.box01 {
 background-color: rgba(31, 20, 11, 0.5);
 backdrop-filter: blur(10px);
}

上記のように、ぼかすための値であるblur()を使えば、かっこいい見た目のボックスを実装できます。

他にも値を設定できるのでいろいろと試してみることをお勧めします!