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

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

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

リンク先

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

使い方

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

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

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

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

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

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

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

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

よかったらシェアしてください!
  • URLをコピーしました!

コメント

コメント一覧 (2件)

古い藤 へ返信する コメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次