CSSで磨りガラスのような背景を作る方法

磨りガラスのような半透明のレイヤーをグラスモーフィズムといいます。

画像でいうと一番上のメニュー部分の背景ですね！
iPhoneやiPadに採用されていることもあり、見たことがある人も多いのではないでしょうか。

こちらのグラスモーフィズムは「backdrop-filter」というCSSプロパティを使うことで、
簡単に実装することが出来ます。

backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px); /* Safari用 */

ChromeとFireFoxはこのプロパティに対応していますが、
Safariについては-webkit-のプレフィックスを付けることで対応できます。

CSSひとつでとてもかっこいい背景が作れるので、ぜひ使ってみてくださいね！