すりガラスの様なオシャレなBOXをCSSで作成できるWebサービス 『CSS Glassmorphism Generator』

すりガラスの様なオシャレなBOXを
CSSで実装できるWebサービス。
背景をブラーでぼかしたような美しいデザインを
Web上で簡単に作成、CSSコードを出力します。

リンク先

CSS Glassmorphism Generator リンク先はこちらから

使い方

リンク先を開くと、左側がプレビューウィンドウ、右側が配色やパラメータを調整が可能です。
ColorはBoxの配色、Blurはぼかし率、Opacityは透過率となります。
Shuffle Backgroundで背景の画像を変更ができます。
Shuule colorはBoxの配色をランダムで変更してくれます。

使いたい場面、デザインに合わせて調整していきます。
Opacityを上げると透過率が上がりかなりスッキリした印象にもなります。

画面下部にはCSSコードが出力されています。
Backdrop-filter:blurと出力されています。
また枠が不要な場合はBorderの調整、
角丸が不要な方はborder-radiusを調整します。

サンプル事例も掲載されています。Copy Codeでそのまま使う事もできます。
かなりすっきりとした印象ですがオシャレです。
こういうデザインを作ってみたいと思うんですが、なかなか機会がないんですよね。
このツールを使えば簡単に実装が可能です。