グラスモーフィズム（有機ブロブ地）

様式名: グラスモーフィズム / あしらい

あしらい半透明ぼかしマルーン

⧉ 別タブで開く

「壊れた例」を押すと、この様式が成立しなくなる条件を実物で見られます。

特徴 — なぜ効くか

半透明＋背景ぼかしで「すりガラス」を作る。奥行きが1枚で出る
背後に色や形がないと成立しない。無地の上に置くと、ただの薄いグレーの箱になる
重ねるほど弱くなる。ガラスの上にガラスを置くと濁って全部見えなくなる
最大の弱点はコントラスト。背景が動く／写真だと、文字の可読性が場所によって変わる

実装メモ — 踏んだ罠

backdrop-filter:blur(16px) が本体。要素自体の filter:blur ではない(それは中身までボケる)
背景色は rgba で 0.5〜0.7。1.0 に近づけるとガラスでなく板になる
border に rgba(255,255,255,.5) の細線を入れると縁が立ち、ガラスらしくなる
【実測せずに死ぬ罠】明るい地の上で白抜き文字を使うなら、ガラスは「白を薄く」ではなく「黒を濃く」。コンクリート地(#8e8a85)に rgba(255,255,255,.12) を重ねると実効背景が #9c9894 になり、白文字 2.86:1 / 本文 2.45:1 で完全に落ちる。rgba(28,28,30,.42) なら実効 #5e5c5a で 6.66:1 / 5.69:1 で通る。このデモで実際に踏んだ
文字色は「ガラスと地を合成した後の実効色」で測る。ガラスの下の地の色で測っても意味がない。背景がグラデ・ブロブなら最も不利な箇所で測る
backdrop-filter は重い。全画面や多数要素に使うとスクロールが落ちる。数枚に留める
@supports not (backdrop-filter:blur(1px)) で不透明背景のフォールバックを必ず用意する

使いどころ / 使ってはいけない場面

使う: 背後に写真・グラデ・色面があり、その上に情報を載せたいとき。ヒーロー上のカード、写真の上のナビ
使う: 奥行きを1枚で出したいとき。影を足すより軽い
避ける: 白地・単色地のページ。透かすものが無く、ただの薄い箱になる
避ける: 長文を載せる面。背景の明暗が場所ごとに変わるので、読み続ける文章には向かない
避ける: 低スペック端末が主要ターゲットのとき。backdrop-filter は描画コストが高い

壊れる条件

背後を無地にする → 透かすものが無く、ぼかしが何の仕事もしない。「ただの薄いグレーの箱」になる（demo_bad.html の[1]）
明るい地の上でガラスを「白を薄く」作る → 合成後がさらに明るくなり、白抜き文字が AA(4.5:1) を下回る（demo_bad.html の[2]。実測 2.86:1）
ガラスの上にガラスを重ねる → 半透明が乗算されて濁り、背後の形も文字も両方見えなくなる
地とブロブの明度差を潰す → 暗い地に暗いブロブを置くと、ぼかした瞬間に全部同じ色になり形が消える
@supports のフォールバックを書かない → 非対応環境で背景がほぼ透明になり、文字が地に直接乗って読めなくなる

コントラスト実測

対象	文字色	背景	実効背景	比	判定
見出し（効く例）	`#ffffff`	`#8e8a85`	`#5e5c5a`	6.66:1	AA 合格
本文（効く例）	`#f2ece9`	`#8e8a85`	`#5e5c5a`	5.69:1	AA 合格
見出し（壊れた例：白を薄く）	`#ffffff`	`#8e8a85`	`#9c9894`	2.86:1	不合格
本文（壊れた例：白を薄く）	`#f2ece9`	`#8e8a85`	`#9c9894`	2.45:1	不合格

アクセシビリティ

コントラストは「合成後の実効色」で測る。背景がグラデ・ブロブなら最も不利な箇所を基準にする
ガラスの縁は白の細線1本だけで表現しがちだが、これは境界を色だけで示している状態。区切りが情報として重要な面では、余白や影も併用する
backdrop-filter が効かない環境では背景がほぼ透明になる。@supports で不透明フォールバックを必ず置く（可読性の担保であって、見た目の保険ではない）
半透明の面に focus リングを置くと沈む。outline は地ではなくガラスより手前の色（白/黒）で指定する

スマホへの落とし方

狭い幅ではブロブが画面外に逃げて「背後の形」が消える。ブロブの位置は % か vw で指定し、SPでも1つは画面内に残るようにする
blur 半径は幅に対して相対にしない。px 固定でよい（相対にすると SP でぼけ量が足りず、粒が見える）
ガラスの max-width を切らないと、SP で画面いっぱいの板になりガラスに見えなくなる

ブラウザ対応

backdrop-filter は Chrome 76+ / Firefox 103+ / Safari 9+（Safari は -webkit- 接頭辞が必要な期間が長かった）。※2026-07-22 時点の一般的な理解に基づく記述で、一次情報での再確認は未実施
接頭辞なし版と -webkit- 版を両方書くのが安全。@supports の条件も両方を or で見る

関連するパーツ

コードを見る

<!doctype html>
<html lang="ja"><head><meta charset="utf-8"><title>グラスモーフィズム デモ</title><style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,"Hiragino Kaku Gothic ProN",sans-serif;
  background:#8e8a85;padding:28px;position:relative;overflow:hidden;min-height:340px}
/* ガラスは背後に形が無いと成立しない。ブロブがその「形」。
   地とブロブの明度差を潰すとガラスが濁る。暗い地に暗いブロブは禁物（実際にやらかした） */
/* 色数は絞る：コンクリート地＋マルーン1色。紫・マゼンタ・青の3色使いは本人の手癖ではない */
.blob{position:absolute;border-radius:50%;filter:blur(46px);opacity:.95}
.b1{width:300px;height:300px;background:#7b1418;top:-80px;left:-60px}
.b2{width:250px;height:250px;background:#a81d22;bottom:-95px;right:-40px}
.b3{width:170px;height:170px;background:#5c0f12;top:118px;right:130px}

.glass{
  position:relative;
  /* 明るい地の上で白抜き文字を使うなら、ガラスは「白を薄く」ではなく「黒を濃く」。
     rgba(255,255,255,.12) だと合成後の実効背景が #9c9894 になり、
     白文字で 2.86:1・本文で 2.45:1 と完全に落ちる（実測）。
     rgba(28,28,30,.42) なら実効 #5e5c5a で 6.66:1 / 5.69:1 で通る */
  background:rgba(28,28,30,.42);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.38);
  border-radius:18px;
  padding:24px;
  max-width:400px;
  margin-top:40px;
}
/* 対応していない環境では不透明にして可読性を守る */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:rgba(28,28,30,.86)}
}
.glass h3{color:#fff;font-size:19px;margin-bottom:8px;letter-spacing:.01em}
.glass p{color:#f2ece9;font-size:13px;line-height:1.85}
.pill{display:inline-block;margin-top:16px;background:#fff;color:#5c0f12;
  font-size:12px;font-weight:700;padding:8px 18px;border-radius:999px}
</style></head><body>
<div class="blob b1"></div>
<div class="blob b2"></div>
<div class="blob b3"></div>
<div class="glass">
  <h3>すりガラスの奥行き</h3>
  <p>半透明とぼかしで、背後の色を透かしながら情報を載せる。背景に形が無ければ、この箱はただの薄いグレーになる。</p>
  <span class="pill">CONTACT →</span>
</div>
</body></html>

出典・参考: 自作の再現実装。試作1（ベントー×コンクリート×紫グラス）の系統