【Next.js】グラスモーフィズムUIの作り方を解説

backdrop-blur と半透明の背景は、ヘッダーか1枚のカードに限定します。全セクションに付けると、文字が沈み、スマホが重くなります。

Tailwind なら bg-white/10 backdrop-blur-md border-white/20 が起点です。そのままだとコントラスト不足になりやすいです。

作り方は3つです。CSS だけ。ヘッダーにだけ使う。完成しているガラスのヒーロー／カードを載せる。

1つ目は、背景が単色なのに blur することです。ガラスは、後ろに写真やグラデーションがあって成立します。

2つ目は、本文のコントラスト不足です。WCAG の目安を下回ると、今っぽさより読めなさが先です。

3つ目は、大きな面積に blur することです。固定ヘッダーの薄い帯なら耐え、全面パネルは重いです。

写真の上に短い見出しと CTA を載せるときに使います。本文の長文は、不透明側に置きます。

透明ヘッダーが、少し下がったらガラスになる、という型です。ヘッダー記事は https://design-layer.com/articles/nextjs-modern-header-guide です。

写真、blur、文字色、ホバーまで揃った塊は、クラスを足すだけでは出ません。

DesignLayer でライブ確認してから載せてください。https://design-layer.com/components

無料コピーは1日3回です。ガラスを全ページに複製しないでください。

見た目で繰り返し出る質問です。