こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
最近のWebデザインでは、ガラスのように透けた質感がトレンドとして注目を集めています。
特にAppleのデザインに代表される「グラスモーフィズム（Glassmorphism）」は、光の屈折やぼかしをうまく活用し、透明感と立体感を同時に演出できる表現技術です。
今回はその中でも、テキストそのものが背景を透かして見える「グラスモーフィズム文字」の作り方をご紹介します。
CSSだけで再現できるシンプルな手法から、背景との馴染み方を調整する応用パターンまで、すぐに使えるサンプル付きで解説します。
CSSだけで作るグラスモーフィズム文字
まずは最も基本的な実装例です。
背景を透過させつつ、ぼかし効果を使って「磨りガラスの上に文字が乗っているような質感」を作ります。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
このコードでは、backdrop-filter: blur(10px); を使うことで背景だけをぼかす効果を与えています。
つまり、文字の背後にある画像がリアルタイムで透けて見えるわけです。
背景と調和するグラデーション文字に応用
グラスモーフィズム文字に少し華やかさを加えたい場合、背景の色味に合わせたグラデーション文字にしてみましょう。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
ここではbackground-clip: text;を使用し、グラデーションを文字のみに適用しています。
この効果により、光が文字を通り抜けて反射しているような立体感を演出できます。
- 透過×ぼかしで柔らかいガラス感を出す
- グラデーションで光の屈折を表現
- 背景が変わっても自然に馴染む
まとめ
グラスモーフィズム文字は、単なる透過表現ではなく、背景との関係性をデザインに取り込む新しいアプローチです。
たとえば、ヒーローヘッダー部分で写真の上にタイトルを重ねるときや、UI要素の中で高級感を出したい場面に非常に効果的です。
特にbackdrop-filterはサポートブラウザも増えてきており、モダンなサイトでは積極的に使える表現となっています。
小さな見出しやボタンに応用しても、サイト全体が「洗練された印象」に変わるでしょう。
satokotadesignキャンペーン実施中！
