背景にグラデーションをかけるCSS

最終目標

こんな感じなことがしたい。

方法

CSSには、linear-gradient()という便利なものが存在します。
これは、2色以上を指定し、直線的にグラデーションした画像を生成してくれるもの。
放射状にグラデーションするradial-gradient()なんかもあります。

ただし、IE9以下は対応していません。

書き方

基本的な書き方は、background: linear-gradient(方向(最終的に到達する箇所), 開始地点の色, 終了地点の色);です。

方向の指定は、例えば「下へ向かう」ならto bottom、「右上へ向かう」ならto right topとなります。
開始地点の色は、to bottomの場合だと、上側の色です。
終了地点の色は、開始地点の逆ですね。

例えば、右上から左下に向けて、白から黒へと変化していく場合は以下のようになります。

background: linear-gradient(to left bottom, rgba(255, 255, 255, 1), rgba(0, 0, 0, 1));

※透過させたい場合に備えて、rgbaで指定しています。別に、#fffとかでも構いません。

▼ 描画例

応用：グラデーションに緩急をつける

background: linear-gradient(to left bottom, rgba(255, 255, 255, 1) 90%, rgba(0, 0, 0, 1));

▼ 描画例

上記のように、色に対してパーセンテージを指定することで、変化する場所を変えることができます。
イメージとしては、上の例でいくと、「90%の地点までは白で塗ってから、グラデーション変化していく」という指示になります。

複数色による変化

色の指定をカンマ区切りで増やすことで、増やすことができます。
例として、白→黒→赤→青としてみます。

background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(0, 0, 0, 1), rgba(255, 0, 0, 1), rgba(0, 0, 255, 1));

▼ 描画例

2022-07-11 09:00:00