CSSでスクロールに連動して変化するグラデーション背景を実装する方法
Webページをスクロールしたときに、背景のグラデーションが自然に変化していく演出は、サイトに動きと深みを与えてくれる効果的なテクニックです。CSSだけでこの効果を実現するには、linear-gradient()を使ったグラデーション背景と、十分な高さを持つbody要素を組み合わせます。
仕組みのポイント
この手法の鍵となるのは、以下の2点です。
- bodyの高さを250vhなど画面より大きく設定する: ページ全体が長くなることでスクロールが発生します。グラデーションはbody全体に描画されるため、スクロールに応じて見えている部分が変化し、まるでグラデーションが「動いている」ように見えます。
- linear-gradient()で複数のカラーストップを指定する: 角度（141deg）と色の位置（0%、40%、65%、75%）を細かく指定することで、滑らかで奥行きのある色の遷移を作れます。
コード例
実際のコードは以下の通りです。
<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 250vh;
color: white;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(
141deg,
#a47dff 0%,
#4e28a7 40%,
#22053d 65%,
#72a4ff 75%
);
}
</style>
</head>
<body>
<h1>スクロールで背景グラデーションが変化するデモ</h1>
<p style="font-size: 30px;">
ここにサンプルテキストが入ります。ページを下へスクロールすると、
背景のグラデーションが少しずつ移り変わっていきます。
</p>
<h2 style="position:fixed;">スクロールして効果を確認してください。</h2>
</body>
</html>
コードの解説
- height: 250vh; — bodyの高さをビューポートの2.5倍にすることで、スクロール領域を確保しています。
- background: linear-gradient(141deg, ...) — 141度の角度で斜め方向に走るグラデーションを定義しています。紫系の#a47dffから始まり、濃い紫#4e28a7、さらに暗い#22053dを経由して、明るい青#72a4ffへと変化します。
- position: fixed; — 「Scroll to see the effect」の見出しを画面に固定することで、スクロール中もメッセージが表示され続けます。
表示結果
上記のコードをブラウザで開くと、ページ上部では明るい紫色を基調としたグラデーションが表示されます。
ページを下へスクロールしていくと、グラデーションは濃い青から明るい青へと徐々にシフトしていきます。テキストは白色に設定されているため、暗い背景色でも視認性が保たれる点にも注目してください。
カスタマイズのヒント
- カラーストップの割合（0%、40%など）を変更すると、各色が切り替わるタイミングを調整できます。
- 角度を90degにすると上下方向、180degにすると縦方向のグラデーションになります。
- JavaScriptと組み合わせれば、スクロール量に正確に連動したより高度なアニメーションも可能ですが、この方法ならCSSのみで軽量に実装できます。
CSSだけ手軽に実装できるので、ランディングページやポートフォリオサイトの背景演出としてぜひ活用してみてください。
-
CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック
CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>
-
CSSで作る！スクロール時に画面上部へ固定されるナビゲーションバーの実装方法
CSSでスクロール時に固定されるナビゲーションバーを作成する方法Webサイトでページをスクロールしても画面上部に固定され続けるナビゲーションバーは、メニューへのアクセス性を保ち、ユーザビリティを大きく向上させる定番のUIテクニックです。CSSのpositionプロパティとJavaScriptを組み合わせることで、誰でも簡単に実装できます。この記事では、スクロールするとナビゲーションバーが画面上部にピタッと固定される仕組みを、実際のコード例とともにわかりやすく解説します。positionプロパティの基本構文CSSにおけるpositionプロパティの基本構文は次のとおりです。セレクタ {