【Glassmorphism】ガラス風のエフェクトをCSSで実装する方法

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia laborum inventore nulla illum, eaque sint culpa. Repellat aliquid nemo vero nesciunt placeat voluptate aspernatur sapiente? Dolorum necessitatibus officiis nobis laboriosam!

ガラスに blur をかけて背景をぼかす
半透明のボーダーでガラスの厚みを表現する
box-shadow で輪郭をはっきりさせ、浮遊しているように見せる
背景画像は、鮮やかでシェイプが多めのものを採用

【コピペ用】グラスモーフィズムの実装コード

/* ガラス本体 */ .glass < width: 100%; max-width: 600px; padding: 30px; background-color: rgba(255, 255, 255, 0.1); /* 背景色 */ border: 1px solid rgba(255, 255, 255, 0.4); /* ボーダー */ border-right-color: rgba(255, 255, 255, 0.2); border-bottom-color: rgba(255, 255, 255, 0.2); border-radius: 15px; -webkit-backdrop-filter: blur(20px); /* ぼかしエフェクト */ backdrop-filter: blur(20px); box-shadow: 0 5px 20px rgba(255, 152, 79, 0.5); /* 薄い影 */ >/* ガラス内の要素 */ .glass h1 < text-align: center; color: #fff; font-family: "Heebo", sans-serif; font-size: 50px; font-weight: bold; letter-spacing: 0.06em; >.glass p

【解説】グラスモーフィズムの実装コード解説

HTML /* ガラス本体 */ .glass < width: 100%; max-width: 600px; padding: 30px; background-color: rgba(255, 255, 255, 0.1); /* 背景色 */ border: 1px solid rgba(255, 255, 255, 0.4); /* ボーダー */ border-right-color: rgba(255, 255, 255, 0.2); border-bottom-color: rgba(255, 255, 255, 0.2); border-radius: 15px; -webkit-backdrop-filter: blur(20px); /* ぼかしエフェクト */ backdrop-filter: blur(20px); box-shadow: 0 5px 20px rgba(255, 152, 79, 0.5); /* 薄い影 */ >/* ガラス内の要素 */ .glass h1 < text-align: center; color: #fff; font-family: "Heebo", sans-serif; font-size: 50px; font-weight: bold; letter-spacing: 0.06em; >.glass p グラスの背景部分の装飾

背景部分には background-image で画像やグラデーション等を設定することで、グラスのエフェクトの良さが引き立ちます。

ガラス部分の装飾 .glass < width: 100%; max-width: 600px; padding: 30px; border-radius: 15px; background-color: rgba(255, 255, 255, 0.1); /* 背景色 */ border: 1px solid rgba(255, 255, 255, 0.4); /* ボーダー */ border-right-color: rgba(255, 255, 255, 0.2); border-bottom-color: rgba(255, 255, 255, 0.2); -webkit-backdrop-filter: blur(20px); /* ぼかしエフェクト */ backdrop-filter: blur(20px); box-shadow: 0 5px 20px rgba(255, 152, 79, 0.5); /* 薄い影 */ >

背景に半透明の白色を設定する
半透明の白のボーダーでガラスの厚みを表現する
ガラスの背景をぼかす
薄い影を設定する

①背景に半透明の白を設定する background-color: rgba(255, 255, 255, 0.1);

このとき opacity を使って調整してしまいがちですが、 opacity だとガラス要素の中身のテキストなども透過してしまいますね。

背景色のみを透過させる場合は、 background-color プロパティに対して rgba() で色と透明度を指定します。

この場合は白色で透明度を 0.1 にしたいので、 255,255,255,0.1 とします。

②半透明のボーダーでガラスの厚みを表現 border: 1px solid rgba(255, 255, 255, 0.4); border-right-color: rgba(255, 255, 255, 0.2); border-bottom-color: rgba(255, 255, 255, 0.2);

続いては、ガラスの厚みを表現するために、 border プロパティでボーダーを作成します。

先ほどと同様、半透明の白色を設定したいので rgba() を使用します。

ここでポイントなのが、 上・左のボーダーと下・右のボーダーそれぞれの透明度に変化をつけること です。

DEMOでは、上・左には透明度を 0.4 、下・右には 0.2 を指定しました。

③ガラスの背景をぼかす -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);

背景部分をぼかすのには、 backdrop-filter プロパティを使用します。

backdrop-filter は、 要素の背後にさまざまなグラフィック効果を適用するためのプロパティ で、ここではぼかしをかけるための blur() を使用します。

DEMOでは 20px としていますが、数値を上げるとぼかし度合いが強くなり、下げるとより鮮明になるので、各自で調整してください。

backdrop-filter は比較的新しめのプロパティで、現時点では FirefoxやIEなどでは対応していません。

④薄い影を設定する box-shadow: 0 5px 20px rgba(255, 152, 79, 0.5);

最後に、 box-shadow でガラス要素に影をつけて完成です。

影の色は背景に似た色を使うことで、背景と馴染みやすくなります。

【まとめ】グラスモーフィズム（Glassmorphism）をCSSで実装する方法

グラスモーフィズムエフェクトをCSSで実装する方法 を紹介しました。

ガラスに blur をかけて背景をぼかす
半透明のボーダーでガラスの厚みを表現する
box-shadow で輪郭をはっきりさせ、浮遊しているように見せる
背景画像は、鮮やかでシェイプが多めのものを採用

📎📎📎📎📎📎📎📎📎📎