CSSのグラデーションで2色、3色を指定する方法

CSSでは色の指定において、単色のみならずグラデーションを指定することができます。

グラデーションは当然1色ではなく、2色、3色と指定するものです。

CSSのグラデーションで2色、3色、4色を指定する方法を解説します。

グラデーション指定の基本

CSSでグラデーションを指定するには上記のように指定します。

向きは「to」で指定する方法と角度を指定する方法があります。

色の指定は最低2つ指定します。3色以上指定する場合は「, 次の色」のようにカンマと色を追加で指定します。最後の色の後ろにはカンマはいりません。

2色グラデーション

background-image: linear-gradient(to right, yellow, red)

3色グラデーション

background: linear-gradient(to right, yellow, red, purple)

4色グラデーション

background: linear-gradient(to right, yellow, red, purple, blue)

5色以上の場合も「,色」を追加することができます。

色の位置を指定する方法

3色指定したとき、1色目は一番左、3色目は一番右、2色目はそのちょうど真ん中になります。

しかし、デザインによってはこの位置を調整したいことでしょう。

全体を0～100％としたときの位置を%で指定しましょう。

background: linear-gradient(to right, yellow, red 20%, purple 70%)

ポイントは「,色 位置%」でワンセットであることです。半角スペースやカンマの位置に注意しましょう。

中間の位置を指定する方法

色と色の間に「,位置%」だけ指定すると中間の位置を指定できます。

background: linear-gradient(to right, yellow, 20%, red)

黄色と赤の間の色はオレンジです。その位置を指定するとき「オレンジ」を省略できます。

中間色を調べて記述するより楽ですね。

linear-gradientを使って複数色背景を表現する

上記を応用して、グラデーションしない明確な複数色の背景を表現することも可能です。

前の色の終わる位置と次の色の始まる位置を同じ位置に指定しましょう。

2色背景

background-image: linear-gradient(to right, yellow 50%, red 50%)

3色背景

background-image: linear-gradient(to right, yellow 33%, red 33%, red 66%, purple 66%)

4色背景

background-image: linear-gradient(to right, yellow 25%, red 25%, red 50%, purple 50%, purple 75%, blue 75%);

まとめ

色を追加するには「, 次の色」を追加していく。

色の位置を指定するには「,色 位置%」のように、色の後ろに位置%を指定する。

以上、CSSのグラデーションで2色、3色、4色を指定する方法でした。