【コピペOK】CSSでガラス風UI（Glassmorphism）を作る方法

近年のWebサイトやアプリでは、ガラスのように透明感のあるデザインをよく見かけます。

このデザインはGlassmorphism（グラスモーフィズム）と呼ばれ、AppleやMicrosoftのデザインでも採用されている人気のUI表現です。

一見難しそうに見えますが、実はCSSだけで簡単に作ることができます。

今回は、Glassmorphismの基本的な作り方と、よりおしゃれに見せるコツを紹介します。

Glassmorphismとは？
基本のHTML
基本のCSS
backdrop-filterとは？
半透明にするのがポイント
白い枠線でガラス感アップ
影を付けると浮いて見える
角を丸くすると柔らかい印象に
Glassmorphismをきれいに見せるコツ
対応ブラウザについて
FANELABのようなサイバー風デザインとも相性抜群
まとめ
サイバー風Webデザインシリーズ

Glassmorphismとは？

Glassmorphismとは、すりガラスのような透明感を表現するデザイン手法です。

主な特徴は次のとおりです。

半透明の背景
背景をぼかす
白い枠線
柔らかい影
シンプルな配色

背景が透けて見えることで、奥行きのあるモダンなデザインになります。

基本のHTML

まずはシンプルなカードを用意します。

<div class="glass">
    <h2>Glass Card</h2>
    <p>CSSだけで作るガラス風UIです。</p>
</div>

基本のCSS

Glassmorphismで最も重要なのがbackdrop-filterです。

body{

    margin:0;
    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    background:
    linear-gradient(
        135deg,
        #00d9ff,
        #8b5cf6,
        #ff4de3
    );

}

.glass{

    width:320px;
    padding:30px;

    background:rgba(255,255,255,.15);

    border:1px solid rgba(255,255,255,.3);

    border-radius:20px;

    backdrop-filter:blur(15px);

    -webkit-backdrop-filter:blur(15px);

}

このコードだけでも、ガラスのような透明感を表現できます。

backdrop-filterとは？

backdrop-filterは、要素の背景にあるものをぼかすCSSプロパティです。

例えば、

backdrop-filter:blur(20px);

と指定すると、カードの後ろにある背景だけがぼやけます。

画像をぼかしているわけではなく、「カード越しに背景がぼやけて見える」ため、本物のガラスのような印象になります。

半透明にするのがポイント

背景色は白ではなく、透明度を付けます。

background:rgba(255,255,255,.15);

透明度があることで、背景がほんのり透けて見えます。

逆に完全な白にしてしまうと、ガラス感がなくなってしまいます。

白い枠線でガラス感アップ

枠線も重要なポイントです。

border:1px solid rgba(255,255,255,.3);

少しだけ白い線を入れることで、ガラスの縁のような印象になります。

影を付けると浮いて見える

カードに影を付けると、背景から少し浮き上がったように見えます。

box-shadow:
0 8px 30px rgba(0,0,0,.2);

影は濃くしすぎず、柔らかく付けるのがおすすめです。

角を丸くすると柔らかい印象に

Glassmorphismでは角丸もよく使われます。

border-radius:20px;

20〜30px程度にすると、モダンで親しみやすいデザインになります。

Glassmorphismをきれいに見せるコツ

ガラス風UIは背景によって印象が大きく変わります。

おすすめは、

グラデーション背景
写真
ネオンカラー
イラスト
サイバー風背景

など、色の変化がある背景です。

単色背景ではぼかしが分かりにくいため、背景にも少し工夫をするとより魅力的になります。

対応ブラウザについて

backdrop-filterは現在、多くの主要ブラウザで利用できます。

ただし、一部の古いブラウザでは対応していない場合があります。

Safariでは互換性のために、

-webkit-backdrop-filter:blur(15px);

も一緒に指定しておくと安心です。

FANELABのようなサイバー風デザインとも相性抜群

Glassmorphismは、サイバー風デザインとも非常に相性が良い表現です。

例えば、

ダークネイビーの背景
シアンやパープルのネオンカラー
発光するボタン
DotGothic16などのゲーム風フォント

と組み合わせることで、近未来的な雰囲気を演出できます。

カードだけをガラス風にすることで、サイト全体にメリハリが生まれ、情報も見やすくなります。

まとめ

Glassmorphismは、一見複雑そうに見えますが、実際には数個のCSSプロパティを組み合わせるだけで作ることができます。

特に重要なのは、

background: rgba()
backdrop-filter
border
box-shadow
border-radius

この5つです。

これらを組み合わせるだけで、モダンで洗練されたガラス風UIを簡単に実装できます。

ぜひ、自分のWebサイトやアプリにも取り入れてみてください。

サイバー風Webデザインシリーズ