Glassmorphism（グラスモーフィズム）の見栄えを取り入れたCodePenデモと実装コードを生成できるジェネレータまとめ

Glassmorphism（グラスモーフィズム）とは、透明度が高い背景とぼかしを組み合わせることで半透明のすりガラスを表現したような見栄えを指します。
鮮やかなグラデーションやイメージと組み合わせることでより際立たせることができたり、シャドウを上手く用いれば適用した要素が空間に浮かんでいるような表現をすることができます。
この見た目自体はそこまで目新しいということでもなく、古いものだとiOS7やWindows Vistaでも採用されていましたが、ApplaがMac OS BigSurで採用したりと少し前からまた注目された見栄えになります。

表現方法含めより詳細に知りたい場合は、英語ではありますが下記記事にまとめられています。
また、様々なグラスモーフィズムデザインを見たい場合は、Dribbbleで「Glassmorphism」のタグを追うのがオススメです。

CodePenで公開されているデモ

CSSでグラスモーフィズムを実装する記述自体はとてもシンプルで、基本的にbackground-color: rgba()とbackdrop-filter: blur()を組み合わせるだけでそれっぽい見栄えにはなります。
ただ、そこへborder, border-radius, box-shadowなどを組み合わせることで異なる見栄えにしたり、JavaScriptを使ってよりクールに見せたりすることもできるので、そういった組み合わせ方の参考になります。

便利ジェネレータ

以下はグラスモーフィズムな見栄えを実装するためのCSSコードを簡単に生成できるジェネレータです。
いずれもぼかし具合と不透明度を調整しながら表示確認が可能で、ジェネレータによっては背景カラー・背景イメージ・角丸・ボーダーなども調整可能になっています。