グラスモーフィズムとは

スペルはGlassmorphism
磨りガラスを使用したような、透明感のあるデザインが特徴的。透明度とブラーを使って表現する。
Appleが使ってるイメージ
細かい話はここを読め
https://uxdesign.cc/glassmorphism-in-user-interfaces-1f39bb1308c9

注意しよう

1: 透明度は塗りつぶしで変えよう

早い話RGBAを使おうという話。

  .hoge {
    opacity: .5;   /*<---こっちじゃなくて*/
    background-color: rgba(255, 255, 255, .5);   /*<---こっちを使おう*/
  }

2: 背景は鮮やかに

単純すぎたり、鈍すぎる背景だとグラスモーフィズムがうまく働かない（らしい！）。
グラスモーフィズムのサイトでは、鮮やかな色のグラデーションを使うことが多いように思われる。

3: 1pxのボーダー

1pxのボーダーを入れることでcoolでcreativeになるらしい。

4:アクセシビリティには気をつけて

透明効果はあくまで装飾であることを念頭に置き、ボタンなどには十分にコントラストに差をつけるべし。
デザインするにあたっては当然といえば当然ではあるが、アフォーダンスやゲシュタルトの法則を気にかけろという話である。

cssで実装する際

基本は前述したとおり、rgbaの背景色を使用し、borderを1px入れる感じで作ります。
それに加えてdropshadowなんかを入れるといい感じになりそうです。
あとblurも入れましょうね。

  /*こんな感じ？*/
  .hoge {
    background-color: rgba(255, 255, 255, .3);
    border: 1px solid rgba(255, 255, 255, .5);
    filter: drop-shadow(0.0px 0.0px 10.0px #000);
    backdrop-filter: blur(6px);
  }

作ってみた

ここまでcssで例とか出しましたけど、僕は最近流行りのtailwind css使います。（なれてきて気持ちよくなってる）

See the Pen glass by heishi1HUMANITY (@heishi1humanity) on CodePen.