動くグラデーション背景の Hero セクション
4色のグラデーションが時間とともにゆっくり流れる ヒーロー背景 です。 linear-gradient に background-size:400% 400% を組み合わせ、 @keyframes で background-position を左右に動かすことで、画像を一切使わずに色がうねるような動きを作っています…
解説
4色のグラデーションが時間とともにゆっくり流れるヒーロー背景です。linear-gradient に background-size:400% 400% を組み合わせ、@keyframes で background-position を左右に動かすことで、画像を一切使わずに色がうねるような動きを作っています。min-height:100vh と display:grid; place-items:center により、見出し・説明文・ボタンを画面中央に縦横そろえて配置できます。
使う場面
- LP やサービスサイトのファーストビュー
- キャンペーンや新商品の告知ページの導入
- ポートフォリオやイベントサイトの表紙的な見せ場
配色はグラデーションに並べた4色（このコードでは紫〜ピンク系）を差し替えるだけで雰囲気を一新できます。動きの速さは animation の秒数（12秒）で調整し、長くするほど落ち着いた印象になります。見出しは clamp() で画面幅に応じて自動で文字サイズが変わるため、スマホでも崩れません。色の動きが気になるユーザーのために prefers-reduced-motion でアニメーションを止め、静的なグラデーションにフォールバックさせると安心です。
使用例・適したシーン
- LP のファーストビュー
- サービストップの導入
- コーポレートサイトのトップ
よくある質問
グラデーションの色を変えるには？
hero の background にある linear-gradient の4色を好きなカラーコードに置き換えます。background-size の 400% 400% はそのまま残してください。これがあることで色が動く余白が生まれます。
テキストが読みにくいときの対策は？
明るい色を使う場合は文字色を濃くするか、見出しの背後に半透明の暗いオーバーレイを重ねるとコントラストを確保できます。背景が動いても文字の可読性を最優先に調整してください。