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コードを簡単に生成できるジェネレータです。
いずれもぼかし具合と不透明度を調整しながら表示確認が可能で、ジェネレータによっては背景カラー・背景イメージ・角丸・ボーダーなども調整可能になっています。