Glassmorphism CSS ジェネレーター

 (ui.glass)
7 ポイント 投稿者 xguru 2021-08-29 | 2件のコメント | WhatsAppで共有

  • macOS BigSur / Windows 11 で使われるUIデザイントレンド

  • 上位要素の背景を、その下にある画像/色/パターンがぼかされた形で表示

→ backdrop-filter: blur() を使用

  • 背景画像/色/グラデーションの指定、および Blur 値、透明度、Saturation の調整が可能

関連記事

2件のコメント

 
galadbran 2021-08-29

blur と saturation の値をいくら変えても何も変わらないのでおかしいと思ったのですが、Edge ではちゃんと動いて Firefox では動かないんですね……はは
 
joyfui 2021-08-29

私もFirefoxを使っているので何が違うのかと思ったら、Firefoxはまだデフォルトでは対応していなかったんですね…。

https://developer.mozilla.org/ja/docs/Web/CSS/backdrop-filter

about:config の設定を変更すると動くようです。