CSS Tips | 超実務コアCSSテクニック：カラー・背景 － グラスモーフィズム

Web APP CSS
スポンサーリンク
スポンサーリンク

グラスモーフィズムは「背景をぼかした半透明カード」で“空気感”をデザインする技術

ガラス越しに背景が見えるような、
ふわっと透けて、光がにじむ UI 表現。
それが「グラスモーフィズム（Glassmorphism）」です。

ポイントはただの透明ではなく、
半透明の白（または黒）＋ 背景のぼかし ＋ 薄い境界線 ＋ 柔らかい影。
この4つを組み合わせて“ガラスっぽさ”を作ります。

ここから、CSS と Tailwind CSS の両方で、
実務でそのまま使える形に落とし込んでいきます。

グラスモーフィズムの基本構成（ここが一番大事な考え方）

ガラスカードの必須要素

半透明の背景色
背景をぼかす backdrop-filter: blur(...)
薄い境界線（白 or 境界色の透明）
少しだけ広がる柔らかい影

この4つが揃うと、一気に「ガラス」に見えます。
どれか1つ欠けると、ただの半透明ボックスになりがちです。

例1：一番シンプルなグラスカード（CSS）

.glass-card {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.45);
  padding: 1.5rem;
  color: #f9fafb;
}
CSS
<div class="glass-card">
  シンプルなグラスカード
</div>
HTML

ここで特に重要なのが backdrop-filter: blur(16px); です。
これは「自分の後ろにある背景をぼかす」プロパティで、
これがないと“ガラス感”はほぼ出ません。

例2：同じものを Tailwind CSS で書く

<div class="bg-[rgba(255,255,255,0.12)]
            border border-[rgba(255,255,255,0.3)]
            rounded-2xl
            backdrop-blur-xl
            shadow-[0_18px_45px_rgba(15,23,42,0.45)]
            p-6 text-slate-50">
  Tailwind 版グラスカード
</div>
HTML

backdrop-blur-xl が backdrop-filter: blur(...) に相当します。
背景色は bg-[rgba(...)] の任意値で細かく調整できます。

例3：ダーク背景の上に置く“王道グラスモーフィズム”

CSS 版

.page {
  min-height: 100vh;
  background: radial-gradient(circle at top, #1d4ed8, #020617);
  display: flex;
  align-items: center;
  justify-content: center;
}

.glass-card {
  background: rgba(15, 23, 42, 0.55);
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.8);
  padding: 2rem;
  color: #e5e7eb;
}
CSS
<div class="page">
  <div class="glass-card">
    ダーク背景 × グラスモーフィズム
  </div>
</div>
HTML

背景にグラデーションや光を入れておくと、
ガラス越しに“にじんで見える”ので一気に雰囲気が出ます。

例4：Tailwind でヒーローセクション＋グラスカード

<section class="min-h-screen flex items-center justify-center
                bg-[radial-gradient(circle_at_top,#1d4ed8,#020617)] px-6">
  <div class="max-w-md
              bg-[rgba(15,23,42,0.55)]
              border border-[rgba(148,163,184,0.5)]
              rounded-2xl
              backdrop-blur-2xl
              shadow-[0_24px_60px_rgba(15,23,42,0.8)]
              p-8 text-slate-100">
    <h1 class="text-2xl font-semibold mb-3">Glassmorphism UI</h1>
    <p class="text-sm text-slate-200/80 mb-6">
      背景をぼかした半透明カードで、空気感のあるデザインを作るテクニックです。
    </p>
    <button class="px-4 py-2 rounded-full bg-sky-500/80 hover:bg-sky-400 text-white text-sm font-medium">
      はじめる
    </button>
  </div>
</section>
HTML

ここでのポイントは、
背景側にもしっかり「色とグラデーション」を用意しておくこと。
背景がただのベタ塗りだと、グラス感が弱くなります。

例5：ガラス風ナビゲーションバー

CSS 版

.nav {
  position: fixed;
  inset-inline: 1.5rem;
  top: 1rem;
  background: rgba(15, 23, 42, 0.6);
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #e5e7eb;
}
CSS

Tailwind 版

<nav class="fixed left-6 right-6 top-4
            bg-[rgba(15,23,42,0.6)]
            border border-[rgba(148,163,184,0.5)]
            rounded-full
            backdrop-blur-2xl
            px-4 py-2
            flex items-center justify-between
            text-slate-100 text-sm">
  <span class="font-semibold">GlassNav</span>
  <div class="flex gap-4">
    <a class="text-slate-200/80" href="#">Home</a>
    <a class="text-slate-200/80" href="#">About</a>
    <a class="text-slate-200/80" href="#">Contact</a>
  </div>
</nav>
HTML

細長い丸い形＋グラスモーフィズムは、
macOS や iOS を連想させる“ネイティブ感”のある UI になります。

例6：ライトテーマ側のグラスモーフィズム

ダーク背景だけでなく、
明るい背景でも「白ガラス」風にできます。

CSS 版

.light-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #e0f2fe, #fef9c3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.light-glass {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(148, 163, 184, 0.6);
  padding: 1.75rem;
  color: #1f2937;
}
CSS

Tailwind 版

<section class="min-h-screen flex items-center justify-center
                bg-[linear-gradient(135deg,#e0f2fe,#fef9c3)] px-6">
  <div class="max-w-md
              bg-[rgba(255,255,255,0.7)]
              border border-[rgba(148,163,184,0.5)]
              rounded-2xl
              backdrop-blur-xl
              shadow-[0_18px_40px_rgba(148,163,184,0.6)]
              p-7 text-slate-800">
    <h2 class="text-xl font-semibold mb-3">Light Glass</h2>
    <p class="text-sm text-slate-700/90">
      明るい背景でも、半透明の白とぼかしを組み合わせることでガラス感を出せます。
    </p>
  </div>
</section>
HTML

ライト側では、
背景色・ボーダー色・影の色を「グレー寄り」にすると上品になります。

グラスモーフィズムを設計するときの重要ポイントの整理

背景との“コントラスト”を意識する

背景が単色だとガラス感が弱くなります。
グラデーション・写真・光のにじみ（radial-gradient など）と組み合わせると、
ガラス越しに“世界が見える”感じが出ます。

半透明の色は「白 or 黒」＋ 低めのアルファ値

白ガラスなら rgba(255,255,255,0.1〜0.35)
黒ガラスなら rgba(15,23,42,0.4〜0.65)
このあたりを起点に、背景とのバランスを見て調整すると良いです。

境界線は「細く・薄く」

border: 1px solid rgba(255,255,255,0.3) のように、
あくまで“輪郭をそっとなぞる”程度に。
太く・濃くすると一気に安っぽくなります。

影は「広く・薄く」

0 18px 45px rgba(15,23,42,0.45) のように、
距離とぼかしを大きめにして、
アルファ値は抑えめにすると“浮いている”感じが出ます。

そのまま使えるグラスモーフィズム・コンポーネント（Tailwind）

<section class="min-h-screen flex items-center justify-center
                bg-[radial-gradient(circle_at_top,#1d4ed8,#020617)] px-6">
  <div class="max-w-md
              bg-[rgba(15,23,42,0.55)]
              border border-[rgba(148,163,184,0.5)]
              rounded-3xl
              backdrop-blur-2xl
              shadow-[0_24px_60px_rgba(15,23,42,0.85)]
              p-8 text-slate-100">
    <h1 class="text-2xl font-semibold mb-3">Glassmorphism Card</h1>
    <p class="text-sm text-slate-200/85 mb-6">
      背景の色や光を活かしながら、情報を載せるための“ガラスのレイヤー”を作るイメージです。
    </p>
    <button class="px-5 py-2.5 rounded-full bg-sky-500/85 hover:bg-sky-400 text-white text-sm font-medium">
      アクション
    </button>
  </div>
</section>
HTML

まとめ

グラスモーフィズムは、
「背景を活かしつつ、情報を載せるためのガラスレイヤーを置く」
という発想のデザインテクニックです。

本質は、
半透明の背景色
backdrop-filter: blur(…)
薄いボーダー
広くて柔らかい影
この4つの組み合わせ。

スポンサーリンク
タイトルとURLをコピーしました