すりガラスっぽい半透明のボックスを実装する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コードをコピーして使用するだけ

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

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

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

不透明度やぼかしの調整

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

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

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

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

background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5.3px);
-webkit-backdrop-filter: blur(5.3px);
border: 1px solid rgba(255, 255, 255, 0.29);

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

この記事を書いた人

社員K

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

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