【コード付き】グラスモーフィズムUIの実装方法

2026年3月18日

デザイン見本（デモ）

Design

美しいグラスモーフィズムUIで、モダンなデザインを実現します。

Performance

backdrop-filterを活用し、軽量で滑らかな表現が可能です。

Elegant

半透明レイヤーと繊細なボーダーが高級感を演出します。

コピペで使えるソースコード

HTML

<div class="gm-wrap">
  <div class="gm-blob gm-blob-a"></div>
  <div class="gm-blob gm-blob-b"></div>
  <div class="gm-card">
    <div class="gm-icon"></div>
    <p class="gm-title">Glass Card</p>
    <p class="gm-text">グラスモーフィズムのサンプルカードです。</p>
  </div>
</div>

CSS

.gm-wrap {
    position: relative;
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
    padding: 60px 32px;
    overflow: hidden;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

.gm-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.75;
}

.gm-blob-a {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #7c3aed, #c026d3);
    top: -80px;
    left: -60px;
}

.gm-blob-b {
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, #1d4ed8, #7c3aed);
    bottom: -70px;
    right: -50px;
}

.gm-card {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 22px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28),
                inset 0 1px 0 rgba(255, 255, 255, 0.22);
    padding: 36px 28px;
    width: 240px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gm-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38),
                inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.gm-icon {
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 14px;
    margin-bottom: 16px;
}

.gm-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px;
    letter-spacing: 0.04em;
}

.gm-text {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
    line-height: 1.65;
}

JavaScript

(function() {
    'use strict';
    var cardList = document.querySelectorAll('.gm-card');
    cardList.forEach(function(el) {
        el.addEventListener('mousemove', function(e) {
            var rect = this.getBoundingClientRect();
            var x = e.clientX - rect.left;
            var y = e.clientY - rect.top;
            var cx = rect.width / 2;
            var cy = rect.height / 2;
            var rx = (y - cy) / cy * -10;
            var ry = (x - cx) / cx * 10;
            this.style.transform = 'perspective(600px) rotateX(' + rx + 'deg) rotateY(' + ry + 'deg) translateZ(10px)';
        });
        el.addEventListener('mouseleave', function() {
            this.style.transform = 'perspective(600px) rotateX(0deg) rotateY(0deg) translateZ(0)';
        });
    });
})();

実装のポイント

backdrop-filter: blur()
グラスモーフィズムの核となるプロパティです。要素自体ではなく、要素の「背後にある領域」をぼかします。値が大きいほど強いすりガラス効果になります。Safariでは -webkit-backdrop-filter も併記が必要です。
background: rgba(255, 255, 255, 0.1)
白色を非常に低い透明度で重ねることで、半透明のガラスのような質感を作ります。数値を上げると不透明になり、下げると透明感が増します。0.08〜0.18程度が自然に見えるバランスです。
border: 1px solid rgba(255, 255, 255, 0.2)
半透明の細い白ボーダーがガラスの縁のような繊細な光の反射を再現します。このボーダーがあるかないかで、高級感が大きく変わります。
inset 0 1px 0 rgba(255, 255, 255, 0.22) を使った box-shadow
内側シャドウ（inset）を上方向にわずかに加えることで、ガラスの上辺がほんのり光るハイライト効果が生まれます。外側シャドウと組み合わせることで立体感がさらに増します。
filter: blur() で背景のぼかしblobを作る
カラフルな円形div（blob）に filter: blur() を適用して背景を構成します。backdrop-filter が「背後をぼかす」のに対し、filter: blur() は要素自体をぼかします。この2つは別物です。
position: relative / z-index でレイヤーを管理
背景のblobを position: absolute、ガラスカードを position: relative; z-index: 1 に設定することで、カードが背景の前面に表示されます。親要素を position: relative; overflow: hidden にするのも忘れずに。
transition でなめらかなホバーアニメーション
transition: transform 0.3s ease, box-shadow 0.3s ease を設定しておくことで、ホバー時に translateY(-8px) でカードが浮き上がる動きが滑らかになります。JSで3Dチルト効果をプラスすると、よりリッチな表現になります。

ブラウザ互換性について：
backdrop-filter はChrome・Safari・Edgeでは問題なく動作しますが、Firefoxではデフォルト無効です（設定の layout.css.backdrop-filter.enabled を有効にすれば動作します）。Firefoxへの対応が必要な場合は、backdrop-filterなしでも見栄えが崩れないよう、背景の不透明度を少し高めにするフォールバックを検討してください。

当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。