グラデーションテキスト（Gradient Text）はどんな効果ですか？

文字に流れるグラデーションを乗せる効果。見出し・ロゴ・ヒーローコピーを華やかに見せられる。ヒーローの見出し・キャッチコピー・セクションタイトルなど、視線を集めたいテキストに向く演出です。

Gradient TextはCSSだけで実装できますか？

はい。JavaScriptを使わずCSSの@keyframesアニメーションとtransition／transformだけで実装できます。

コードは無料で使えますか？

はい。Motion LabのコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。コピーしてそのままプロジェクトに利用できます。

Gradient Text — CSS Effect with AI Prompt

CODE

HTML

<div class="demo-stage"><div class="gt-text">GRADIENT</div></div>

CSS

.demo-stage { display:flex; align-items:center; justify-content:center; padding:3rem; }
.gt-text { font-family:'Oswald',sans-serif; font-size:clamp(3rem,11vw,6rem); font-weight:600; letter-spacing:.04em; 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:gt-flow 4s linear infinite; }
@keyframes gt-flow { to { background-position:300% 0; } }

AI PROMPT

Claude Cursor v0

PROMPT

文字に流れるグラデーションを作って。linear-gradient(90deg)を4色（ピンク/紫/青/ピンク）でbackground-size:300%、-webkit-background-clip:text+-webkit-text-fill-color:transparentで文字型に切り抜く。background-positionを0→300%へ4s linear infiniteでループさせ流れを表現。

BOOKS · PR · AMAZON

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

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

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

文字に流れるグラデーションを乗せる効果。見出し・ロゴ・ヒーローコピーを華やかに見せられる。この効果はCSSの@keyframesアニメーションとtransition／transformだけで実装でき、JavaScriptを必要としません。

使いどころ

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

CSS実装のポイント

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

CSSとJavaScriptの違い

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