background-clip: text と -webkit-text-fill-color: transparent を使うと、テキストがそのままマスクになって、背景のグラデーションや色がテキストの形に切り抜かれます。最初に動いているのを見たとき、「あ、これはCSSじゃないと出せない表現だ」と思いました。色変化ではなく、テキストが「色を纏う」——その感覚の違いが、ありきたりなホバーエフェクトとの差になります。なお color プロパティだけでは background-clip: text の表示が上書きされてしまうため、テキスト色の制御には -webkit-text-fill-color を使う必要があります。
今回は5種類のテキストマスク系ボタンを紹介します。ホバーでグラデーションが現れる基本形・光が流れる常時アニメーション・左から色が流れ込むスライド演出・上下2色に塗り分けられた分割カラー・ホバーで色相が回り続ける虹色サイクルの5バリエーションです。JavaScriptは不要、CSSのみで実装しています。
Gradient Fill（グラデーション・フィル）
background-clip: text と -webkit-text-fill-color を組み合わせた、もっとも基本的なテキストマスク実装です。通常時は -webkit-text-fill-color: #e2e8f0（白系）でテキストを表示し、ホバー時に transparent へ切り替えることで、あらかじめ設定しておいたグラデーション背景がテキスト形状にクリップされて現れます。
「色が変わる」ではなく「色がテキストの形に入ってくる」という感覚がこの手法の特徴です。ピンク→パープル→スカイブルーのグラデーションをダーク背景に合わせており、ポートフォリオのCTAやクリエイティブ系LPのアクセントボタンとして使いやすい組み合わせです。
See the Pen Gradient Fill by BaseKENT (@basekent) on CodePen.
調整方法
- グラデーション色:
linear-gradient(90deg, #f472b6, #818cf8, #38bdf8)の3色をお好みに変更してください。2色でもシンプルに映えます - 通常時のテキスト色:
-webkit-text-fill-color: #e2e8f0を変更してください。ダーク背景なら白系、ライト背景なら#1e293b系が合います - トランジション速度:
0.4s easeを0.2sにするとシャープに、0.7sにするとじわっと変化します
Shimmer Text（シマー・テキスト）
ホバーではなく常時アニメーションとして、テキスト上を光のシマーが流れ続けます。background-size: 200% に設定したグラデーションを @keyframes で background-position を動かすことで、光のハイライトがテキストを横断する演出を作っています。
パープル→ライラック→白→ライラック→パープルというカラー構成で、中央の白い光が左から右へ流れていくように見えます。ローディング中の状態表示・「NEW」バッジ型ボタン・特定のコンテンツへの注目誘導など、常に動いていることで「見てほしい」要素として機能します。
See the Pen Shimmer Text by BaseKENT (@basekent) on CodePen.
調整方法
- シマーの速さ:
animation: shimmer 2.4s linear infiniteの秒数を短くすると速く流れます。1.0sでキビキビした印象に - 光の幅: グラデーション中央の
#e2e8f0 50%の前後のカラーストップ位置を狭めると光の幅が細くなります（40%〜60%→47%〜53%など） - グラデーション色:
#a78bfaと#f0abfcをベース色に変更することで、シマーの基調色が変わります
Color Reveal（カラー・リビール）
ホバーで左から色が流れ込んでくるスライド演出です。background-size: 200% のグラデーション（左半分: グリーン、右半分: グレー）を background-position: 100%（右寄り）から 0%（左寄り）へ transition させることで、「色が左から押し寄せてくる」ように見えます。
SVGドロー系の「描かれていく」演出とはまた異なり、テキストの内側から色が浸透してくるような独特の感触があります。フォームの「送信」ボタンや、読み込みが完了したあとに表示されるCTAなど、「動作の結果として変化が起きる」文脈のボタンにフィットします。
See the Pen Color Reveal by BaseKENT (@basekent) on CodePen.
調整方法
- リビール色:
linear-gradient(90deg, #34d399 50%, #94a3b8 50%)の左側の色（#34d399）が現れる色です。お好みのカラーに変更してください - スライド速度:
transition: background-position 0.5s easeの秒数を調整してください。0.3sでシャープに、0.8sでゆっくりと流れ込みます - 境界のぼかし:
#34d399 50%, #94a3b8 50%を#34d399 40%, #94a3b8 60%のようにずらすと色の境目がグラデーションになり、より滑らかな流れ込みに変わります
Dual Tone（デュアル・トーン）
linear-gradient(to bottom, #f59e0b 50%, #ef4444 50%) でテキストの上半分をアンバー、下半分をレッドに塗り分けます。background-clip: text はグラデーションの向きを問わないため、垂直方向でも水平方向でも同じように機能します。
文字が縦方向に2色に切り分けられている見た目は、ロゴ・ブランド名・キャッチコピーを表示するボタンで強い存在感を発揮します。ホバー時は scale(1.06) でわずかに拡大し、2色のカラーリングを際立たせる構成です。アウトドア系・スポーツ系・フードデリバリー系など「熱量があるデザイン」のサイトに向いています。
See the Pen Dual Tone by BaseKENT (@basekent) on CodePen.
調整方法
- 2色の配分:
50%を変えることで境界線の位置が動きます。30%にするとアンバーが細く、70%にすると広くなります - カラーペア: アンバー（
#f59e0b）×レッド（#ef4444）以外に、ブルー（#3b82f6）×シアン（#06b6d4）、パープル（#7c3aed）×ピンク（#ec4899）なども相性が良いです - 境界のグラデーション化:
#f59e0b 45%, #ef4444 55%のように値をずらすと、中間にグラデーションが入り境界が滑らかになります
Hue Cycle（ヒュー・サイクル）
ホバーすると filter: hue-rotate(360deg) が @keyframes でループし続け、テキストのグラデーションカラーが虹色に回り続けます。通常時はピンク→オレンジ→イエロー→グリーン→スカイ→パープルの6色グラデーションでテキストが常時カラフルに表示されており、ホバーで色相が流動的に変化します。
filter: hue-rotate() はすでに -webkit-background-clip: text で切り抜かれたテキストに対してかかるため、グラデーションそのものの色相が回転して「テキストの色が虹になって動く」という演出になります。クリエイティブ系・アート系・音楽系サイトのCTAや、ポートフォリオのトップページで使うと印象に残ります。
See the Pen Hue Cycle by BaseKENT (@basekent) on CodePen.
調整方法
- 回転速度:
animation: hue-cycle 1.8s linear infiniteの秒数を短くすると速く色が回ります。1.0sでダイナミック、3.0sでゆったりした変化になります - ベースのグラデーション: 6色グラデーションを2〜3色に絞ると、回転時の色の変化がよりはっきり見えます（例:
#f472b6, #38bdf8の2色） - 常時アニメーションに変える:
:hoverセレクタを外して.btnに直接animationを当てると、ホバーなしで常時回転し続けるボタンになります
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
