透き通るような透明感。CSSテキストアニメーション「グラスモーフィズム」5選

2026年2月26日

当ページのリンクには広告が含まれています。

まるで本物のガラスがそこにあるかのような、美しい透明感。近年大流行している「グラスモーフィズム」は、すりガラスを通して背景が透けて見えるような、洗練された質感を表現するデザイン手法です。

この記事では、CSSだけで実装できるグラスモーフィズム風のテキストアニメーションを5つ紹介します。テキストは読みやすい「黒文字」をベースにしつつ、枠や背景がガラスのように美しく揺らめきます。SWELLですぐに使えるコピペコードで、サイトをモダンに彩りましょう。

Breathing Frost Glass（呼吸するフロストグラス）

すりガラスのパネルが、ゆっくりと呼吸するように拡大縮小とぼかし具合を変化させます。待機中は柔らかな光を帯びており、ホバーするとガラスがクリアになり、文字がくっきりと浮かび上がります。

See the Pen Breathing Frost Glass by BaseKENT (@basekent) on CodePen.

調整方法

ガラスの曇り具合: backdrop-filter: blur(8px) の数値を大きくすると、背景がより強くぼやけます（iPhoneのコントロールセンターのような質感になります）。
背景の透明度: background: rgba(255, 255, 255, 0.4) の最後の数値（0.4）を下げるとより透明に、上げると白っぽくなります。

Slide Reflection（スライド・リフレクション）

ガラスの表面を、光の反射（リフレクション）が斜めにスライドし続けます。待機中は常に光沢が走り、高級感を演出。ホバーすると光が止まり、ガラスパネル全体が手前にせり出してきます。

.glass-reflect { position: relative; font-size: 2rem; font-weight: bold; color: #111; display: inline-block; padding: 15px 30px; cursor: pointer; background: rgba(255, 255, 255, 0.25); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 8px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow: hidden; /* 反射光がはみ出さないように */ transition: transform 0.3s ease, box-shadow 0.3s ease; } /* 反射光（光沢）のレイヤー */ .glass-reflect::before { content: ”; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient( to bottom right, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 60% ); transform: rotate(45deg) translateY(-100%); /* 待機アニメーション：光沢が走る */ animation: shineSweep 3s infinite; } /* ホバー時の挙動：手前に浮き出る */ .glass-reflect:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 10px 20px rgba(0,0,0,0.1); } .glass-reflect:hover::before { animation: none; /* 光沢を止める */ } @keyframes shineSweep { 0% { transform: rotate(45deg) translateY(-100%); } 100% { transform: rotate(45deg) translateY(100%); } }

調整方法

光の速さ: animation: shineSweep 3s の秒数を短くすると、光沢が素早く通り過ぎるようになります。
光の太さと強さ: linear-gradient 内の rgba(255, 255, 255, 0.6) の透明度を上げるとより強く光ります。

Morphing Water Drop（モーフィング・ウォータードロップ）

水滴のように、ガラスパネルの輪郭が有機的（ぐにゃぐにゃ）に変化し続けます。待機中はアメーバのように形を変えながら浮遊し、ホバーすると美しい真円（丸）に整列します。

See the Pen Morphing Water Drop by BaseKENT (@basekent) on CodePen.

調整方法

サイズ: width と height を変更して、文字サイズに合った大きさに調整してください（文字数が長い場合は横長にするなど）。
変形の激しさ: @keyframes morphDrop 内の % 数値を大きく変えると、より激しく形が歪みます。

Layered Stained Glass（レイヤード・ステンドグラス）

複数のガラスの破片が重なり合ったような、立体的なグラスモーフィズムです。待機中は背後のガラス層がゆっくりとズレながら回転し、ホバーするとすべてのガラスがピタッと一つに重なります。

.glass-layered { position: relative; font-size: 2rem; font-weight: bold; color: #111; display: inline-block; padding: 15px 30px; cursor: pointer; /* メインのガラス（前面） */ background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 8px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); z-index: 2; transition: all 0.4s ease; } /* 背後のガラスレイヤー */ .glass-layered::before { content: ”; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 8px; z-index: -1; /* 待機アニメーション：背後でズレて回転 */ animation: glassSpinBehind 4s ease-in-out infinite alternate; transition: all 0.4s ease; } /* ホバー時の挙動：重なって影が落ちる */ .glass-layered:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); } .glass-layered:hover::before { animation: none; transform: rotate(0deg) translate(0, 0); /* ぴったり重なる */ } @keyframes glassSpinBehind { 0% { transform: rotate(-5deg) translate(-5px, 5px); } 100% { transform: rotate(5deg) translate(5px, -5px); } }

調整方法

背後のガラスの動き: @keyframes glassSpinBehind の角度（deg）や移動距離（translate）を大きくすると、より派手なレイヤー感を演出できます。

Glass Swipe Reveal（グラス・スワイプ・リヴィール）

通常時は黒文字のみが表示されており、その後ろで目に見えないガラスの帯が左右に行き来しています。ガラスが文字の上を通過した瞬間だけ、背後の景色がぼやけて文字が拡大表示されます（ルーペのような効果）。ホバーでガラスが固定されます。

See the Pen Glass Swipe Reveal by BaseKENT (@basekent) on CodePen.

調整方法

レンズの移動範囲: @keyframes swipeLens の translateX(150px) の数値を、文字の長さに合わせて調整してください。文字が長い場合は 250px などにします。
レンズの幅: .glass-swipe-lens の width: 60px; を太くすると、より広い範囲がぼやけるようになります。