背景をボカして透過させるすりガラス風コンテンツを作成、CSSをコピーできる・「Glassmorphism CSS Generator」

Ads

Glassmorphism CSS Generator


Glassmorphism CSS Generatorは背景をボカして透過させるすりガラス風コンテンツを作成、CSSをコピーできるWebアプリです。

Windows VistaのUIでも見られ、macOS Big Surにも採用されたすりガラス風UIはGlassmorphismと呼ばれており、ブラウザでも最近のトレンドになっています。

モダンブラウザでは背景にフィルターをかけられるbackdrop-filterが採用され、こちらのジェネレーターでも使われています。

backdrop-filterのブラウザ対応状況は以下の通りです。

Firefoxだけに目をつぶれば導入できそうです。そのFirefoxも現在検討中なのでいずれ対応してくれるかもしれません。

Firefoxへのフォールバックが必要な際は@-moz-document url-prefix()などを使って対応する形になります。

尚、強いこだわりが無いなら一般的なWebサイトならIEは無視して良いと思います。

Glassmorphism CSS Generator