July 05, 2021 追記

「便利ジェネレータ」に2サイト追加しました。

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

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

CodePenで公開されているデモ

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

Glassmorphic Sign in Form

Glassmorphism | Login Form -> HTML & CSS

Glassmorphism Credit/Debit Card (pure CSS)

Glassmorphism Icon Hover Effects

Glassmorphism CSS Panels and Buttons

Glassmorphism

Glassmorphism Post grid

Glassmorphism Animated

Glassmorphism

Glassmorphism Creative Cloud App Redesign

便利ジェネレータ

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

Glassmorphism CSS Generator

Glassmorphism CSS Generator

Glass Morphism

Glass Morphism

Glassmorhism CSS Generator

Glassmorhism CSS Generator

Toolbox - Glassmorphism Generator

Toolbox - Glassmorphism Generator

Glassmorphism CSS Effect Generator - Glass CSS

Glassmorphism CSS Effect Generator - Glass CSS

Glassmorphism CSS Generator - Glass UI

Glassmorphism CSS Generator - Glass UI