すりガラスっぽい半透明のボックスを実装するCSSを生成できる【CSS Glass】

         

CSS

すりガラスっぽい半透明のボックスを実装するCSSを生成できる【CSS Glass】

2021年07月23日 10:00 2021年07月25日

すりガラスっぽい半透明のボックスを実装するCSSを生成できる【CSS Glass】

こんにちは!社員Kです。

本日は、すりガラスっぽい半透明のボックスを実装するCSSを生成できるサイト【CSS Glass】のご紹介です。



すりガラスっぽいCSSコードを生成できる CSS Glass

まずは、CSS Glass にアクセスしてみましょう。

このGlassmorphism CSS snippetをあなたのフロントエンドプロジェクトにコピー&ペーストすると、驚くべきCSSガラス効果が得られます。CSS Glass

不透明度やぼかしの調整

下記のようにツールを操作してプレビューを見ながら好みの見た目になるように調整します。

 

下記のように、プレビューが表示されます。

 

生成されたCSSコードをコピーして使用するだけ

下記のようなCSSコードが生成されますので、コピーして使用しましょう。



いかがでしたでしょうか?
調整ツールを操作するだけで簡単に、すりガラスっぽいボックスを実装できるツールのご紹介でした。

関連記事

この記事を書いた人

社員K

福岡でWebプログラマー・フロントエンドエンジニアとして10年目。まだまだ勉強することが沢山あるなぁと最近良く思います。日本語には自信があります。すぐに効くダイエット情報募集中!