CSS
すりガラスっぽい半透明のボックスを実装するCSSを生成できる【CSS Glass】
2021年07月23日 10:00 2021年07月25日
こんにちは！社員Kです。
本日は、すりガラスっぽい半透明のボックスを実装するCSSを生成できるサイト【CSS Glass】のご紹介です。
すりガラスっぽい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年目。まだまだ勉強することが沢山あるなぁと最近良く思います。日本語には自信があります。すぐに効くダイエット情報募集中！
