Gradient Animation
グラデーションアニメーション
どんな動き？
複数色のグラデーションを実寸より大きなサイズで背景に敷き、その表示位置をゆっくりと移動させ続けることで、色が滑らかに移り変わっていくように見せるループアニメーション。オーロラのような幻想的な質感を演出でき、ヒーローセクションの背景やボタン、カードの装飾など、視覚的な深みを加えたい箇所で使われる。
よく使う場所
ヒーロー背景ボタン装飾カード背景ローディング画面
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
※生成AIは英語のアニメーション用語を指定する方が意図通りの崩れにくいコードを出力するため、プロンプトは英語で構成しています。そのままAIのチャット欄に貼り付けて使えます。
Continuously pan the position of an oversized background gradient to create a slow, flowing color shift.Trigger:
Load (starts automatically and loops continuously).
Initial state:
background-size: 250% 250%
background-position: 0% 50%
Animation:
The background-position slowly moves across the oversized gradient, smoothly shifting which colors are visible.
Final state:
background-position returns to its starting point, repeating indefinitely.
Timing:
duration: 6–10s per cycle, easing: ease, iteration: infinite (alternate).実装方法の候補
この動きは以下の技術で実装できます。
CSSWebGLthree.js
別名・関連ワード
Animated GradientAurora BackgroundGradient Flow