CSSで作るガラスUI（Glassmorphism）完全ガイド

CSSで作るガラスUI（Glassmorphism）完全ガイド

近年のWebデザインでよく見かける「ガラスのように透けたUI」——それが Glassmorphism（グラスモーフィズム） です。
透明感・ぼかし・光沢を組み合わせることで、洗練されたモダンなデザインを実現できます。

この記事では、CSSだけで作れるGlassmorphismの基本から実用的なUIパーツまでを、コピペOKのコード付きで解説します。

Glassmorphismとは？

Glassmorphismとは、背景をぼかしつつ半透明のレイヤーを重ねることで、ガラスのような質感を表現するデザイン手法です。

  • 半透明（opacity）
  • 背景ぼかし（backdrop-filter）
  • 白い境界線
  • 柔らかいシャドウ

これらを組み合わせることで、奥行きと透明感のあるUIが完成します。

基本のGlassカードを作る

HTML

HTML
<div class="glass-card">
  <h3>Glass Card</h3>
  <p>透明感のあるカードUI</p>
</div>

CSS

CSS
body {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.glass-card {
  padding: 30px;
  width: 300px;
  border-radius: 16px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  color:#fff;
}

backdrop-filter がガラス感の核となるプロパティです。

ボタンにGlassデザインを適用

HTML

HTML
<a href="#" class="glass-btn">クリック</a>

CSS

CSS
.glass-btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 999px;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  text-decoration: none;
  transition: .3s;
}

.glass-btn:hover {
  background: rgba(255,255,255,0.35);
}

ボタンは透明度を少し高めると視認性が良くなります。

Glassモーダル（実用UI）

HTML

HTML
<div class="modal">
  <div class="modal-content">
    <h3>モーダル</h3>
    <p>ガラス風UIのモーダルです</p>
  </div>
</div>

CSS

CSS
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  padding: 40px;
  border-radius: 20px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
}

背景にも透過を入れることで、より自然なレイヤー感が出ます。

Glassデザインを美しく見せるコツ

  • 背景はグラデーションや画像を使う
  • 透明度は 0.1〜0.3 の範囲がベスト
  • borderで輪郭を強調する
  • ぼかしは 8px〜20px が使いやすい

対応ブラウザと注意点

backdrop-filterは一部ブラウザで制限があります。

  • Safari / Chrome → 対応
  • 一部環境では未対応

フォールバックとして背景色を少し濃くしておくのが安全です。

アクセシビリティ（prefers-reduced-motion）

Glass UI自体は動きが少ないですが、ホバーやアニメーションと組み合わせる場合は配慮が必要です。

CSS
@media (prefers-reduced-motion: reduce) {
  .glass-btn {
    transition: none;
  }
}

まとめ

Glassmorphismは、シンプルなCSSでモダンなUIを実現できる強力なデザイン手法です。

  • backdrop-filterが核心
  • 透明＋ぼかし＋境界線で構成
  • UIパーツに応用しやすい

デザイン性を高めたいときに、ぜひ取り入れてみてください。

ワンポイント

「背景がキレイだとGlass UIは一気に映えるよ！グラデーションと組み合わせてみてね！」

関連記事

PAGE TOP