やってみようしばらく眺めてみてください。「色を変える」で配色も切り替わります
アニメーション・演出マイナー（知る人ぞ知る）
動くグラデーション背景
Animated Gradient / Mesh Gradient
背景のグラデーションが、オーロラのようにゆっくり色を変えながら動き続ける。
別名メッシュグラデーションオーロラ背景グラデーションアニメーションGradient Animation
どこで使われている？
- よく見かける場所
- Stripe・AI関連サービスの紹介ページ、音楽アプリ、ブランドサイト
- 使うとよい場面
- ページの第一印象を、やわらかく華やかにしたいとき
- 避けたい場面
- 文字が多い画面の背景（読みにくくなる）
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「動くグラデーション背景（Animated Gradient / Mesh Gradient）」を実装してください。 動き：背景に複数の色のぼかした大きな円を置き、それぞれをゆっくり別々の方向へ動かして、色が混ざり合いながら変化して見えるようにする。動きは10秒以上かけてゆっくりにする。 使う部品：CSS のアニメーション（ぼかした円を動かす）
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | CSS のアニメーション（ぼかした円を動かす） |
|---|---|
| iPhoneアプリなら | MeshGradient（iOS 18以降） |
| Androidアプリなら | Brush.linearGradient を少しずつ変えて自作 |
| Flutterなら | AnimatedContainer でグラデーションを変化 |
| React Nativeなら | react-native-linear-gradient + Reanimated |