アニメーショングラデーション（Animated Gradient）はどんな効果ですか？

色がゆっくり移ろう動くグラデーション背景。ヒーローセクション・ログイン画面の没入感を高める。ヒーローセクションの背景・セクション区切り・装飾レイヤーなど、空気感づくりに向く演出です。

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

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

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

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

Animated Gradient — CSS Effect with AI Prompt

CODE

HTML

<div class="demo-stage" style="padding:0"><div class="ag-box"><span>GRADIENT</span></div></div>

CSS

.ag-box { min-height:280px; display:flex; align-items:center; justify-content:center; background:linear-gradient(-45deg,#E91B89,#7B37A8,#5BAADE,#E91B89); background-size:400% 400%; animation:ag-shift 12s ease infinite; }
.ag-box span { font-family:'Oswald',sans-serif; font-size:2.2rem; letter-spacing:.3em; color:#fff; }
@keyframes ag-shift { 0% { background-position:0% 50%; } 50% { background-position:100% 50%; } 100% { background-position:0% 50%; } }

AI PROMPT

Claude Cursor v0

PROMPT

色が移ろう動くグラデーション背景を作って。linear-gradient(-45deg)に4色、background-size:400% 400%にしてbackground-positionを0%→100%→0%へ12s ease infiniteで往復させる。要素いっぱいに敷き、中央に白文字を置く。

BOOKS · PR · AMAZON

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

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

アニメーショングラデーション（Animated Gradient）とは

色がゆっくり移ろう動くグラデーション背景。ヒーローセクション・ログイン画面の没入感を高める。この効果はCSSの@keyframesアニメーションとtransition／transformだけで実装でき、JavaScriptを必要としません。

使いどころ

ヒーローセクションの背景・セクション区切り・装飾レイヤーなど、空気感づくりに向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。

CSS実装のポイント

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

CSSとJavaScriptの違い

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