No.094
TEXT CSS

Gradient Flow Text

文字の中をグラデーションが流れ続ける見出し。background-clip:text とアニメするbackground-positionで実装。AI/SaaS系の華やかなタイトルに。

DEMO

GRADIENT FLOW

CODE

HTML
<div class="demo-stage gft-stage"><h2 class="gft-text">GRADIENT FLOW</h2></div>
CSS
.gft-stage { display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:280px; }
.gft-text { font-family:'Oswald',sans-serif; font-size:clamp(2rem,8vw,3.4rem); letter-spacing:.06em; background:linear-gradient(90deg,#e91b89,#7b37a8,#5baade,#e91b89); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:gft 4s linear infinite; }
@keyframes gft { to { background-position:300% 0; } }

AI PROMPT

Claude Cursor v0
PROMPT
文字の中をグラデーションが流れ続ける見出しをCSSだけで作って。テキストに linear-gradient（複数色＋末尾を先頭と同色でループ）を background に当て、background-size:300% 100%。-webkit-background-clip:text + -webkit-text-fill-color:transparent（color:transparentも）で文字型にクリップ。@keyframesで background-position を 0→300% へ linear infinite で流す。AI/SaaS系の華やかなタイトルに。

BOOKS · PR · AMAZON

📖 なかしまぁ先生のCSSアニメーション入門 📖 UIデザインの心理学 ―わかりやすさ・使いやすさの法則 📖 Fundamentals of Web Animation with GSAP

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

📚 Kindle Unlimited — 技術書・デザイン書が読み放題。30日無料体験 → 🎧 Audible — 移動中に耳で学ぶオーディオブック。30日無料体験 → 📦 Amazon Prime — Prime Reading・配送特典つき。30日無料体験 → 🎵 Music Unlimited — 作業用BGMに。1億曲が聴き放題・30日無料体験 →

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

グラデーションフローテキスト（Gradient Flow Text）とは

文字の中をグラデーションが流れ続ける見出し。background-clip:text とアニメするbackground-positionで実装。AI/SaaS系の華やかなタイトルに。この効果はCSSの@keyframesアニメーションとtransition／transformだけで実装でき、JavaScriptを必要としません。

使いどころ

ヒーローの見出し・キャッチコピー・セクションタイトルなど、視線を集めたいテキストに向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。

CSS実装のポイント

動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。

CSSとJavaScriptの違い

CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。