ヒーローセクション向けの、ゆっくり揺らめくグラデーション背景。background-positionだけを動かす軽量な実装です。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
グラデーション自体は静止画のまま、background-sizeで4倍に拡大した背景の「見えている窓」をbackground-positionでゆっくり移動させています。widthやfilterを動かさないため描画負荷が小さく、常時動かす背景に向いています。animation-direction: alternateで往復させると、ループの継ぎ目なく揺らぎ続けます。
文字を載せる場合はコントラストが常に確保できる色域に留めるか、文字側に半透明の座布団を敷いてください。
ヒーローセクションの背景に、ゆっくり色が流れるグラデーションアニメーションを付けて。background-size: 400%とbackground-positionのkeyframesで。
動くグラデーション背景を軽くして。アニメーションの秒数を長くして、prefers-reduced-motion時は静止させて。
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。