グラスモーフィズムをCSSで実装するコードを簡単に生成できるジェネレーター -Glass Morphism Generator

カードやパネルにぴったりな透明度のある背景のぼかしを使った磨りガラスのエフェクト、グラスモーフィズムを実装するコードを生成できるジェネレーターを紹介します。

Glass Morphism Generator
Glass Morphism Generator -GitHub

このエフェクトは去年の暮れくらいから、Glassmorphismと呼ばれはじめたエフェクトで、古くはiOS7やWindows Vistaでも使用されています。最近では、macOS Big Surでも見かけますね。
参考: Glassmorphism in user interfaces

Glass Morphism Generatorでは、磨りガラスの透明度やぼかし具合を確認しながら、コードを生成できます。

Glass Morphism Generator

使い方は簡単、下部のスライダーで値を調整するだけです。カード上の画像やテキストは表示・非表示にできます。また、背景画像を自分で用意して変更もできます。

画像を非表示にして、値を調整

背景が分かるくらいにぼかしを入れ、磨りガラスのように設定してみました。デザインツールでこのエフェクトを作成すると、透明度を低くした時に背景のぼかしが無効になってしまうので、注意が必要です。

背景が美しくぼやけた磨りガラスのエフェクト

完了したら、「Generate」ボタンをクリックすると、コードが生成されます。

コードの生成

生成されたコードは、下記の通りです。

ボーダーのサイズや角丸も変更でき、便利ですね。

ボーダーと角丸を変更