CSSで複数の色を組み合わせて色々なグラデーションを表現する方法についてみていきたいと思います。
基本的なグラデーション
基本的なグラデーションはbackgroundプロパティにlinear-gradient()で線形グラデーションをradial-gradient()で円形グラデーションを表現することができます。それぞれの括弧内には開始色と終了色を指定してあげます。
background: radial-gradient(開始色, 終了色);
See the Pen
Untitled by gri-t (@gri-t)
on CodePen.
グラデーションの位置を指定する方法
グラデーションの中心位置は、radial-gradient(at 横の位置, 縦の位置);として、括弧内にat 横の位置（左を0、右を100%）と縦の位置（上を0、下を100%）を指定して設定します。数字の単位は % 意外に px も使用することができます。
background: radial-gradient(at 横の位置 縦の位置, 開始色, 終了色);
See the Pen
Untitled by gri-t (@gri-t)
on CodePen.
グラデーションは不透明でなければ重ねることが可能です。なので、終了色をtransparentとしたり、rgba()のアルファ値を調整して、下のグラデーションが見えるようにしてあげます。
重なる順番は、最初に指定されたものが一番上に、最後のものが一番下にきます。
See the Pen
CSS Mesh Gradients2 by gri-t (@gri-t)
on CodePen.
グラデーションの大きさを指定する
円形のグラデーションは、大きさを指定することができます。円形グラデーションはグラデーション光線の中心点を0として、端が100%となるように広がっています。
各要素にそれぞれグラデーションの終了色が終了する位置を指定して、広がり具合を調整してみました。一番左が100%、次が70%、その次が40%を指定した場合です。一番右側のみ、開始色と終了色の両方を指定しています。位置を記述する場合は、色を指定した後に半角スペースを空けて指定します。
background: radial-gradient(at 横の位置 縦の位置, 開始色 開始位置, 終了色 終了位置);
See the Pen
Untitled by gri-t (@gri-t)
on CodePen.
色々なグラデーションを試してみる
数値や色を変更して、色々なグラデーションのパターンを作ってみるのも楽しそうです。
See the Pen
CSS Mesh Gradients3 by gri-t (@gri-t)
on CodePen.
See the Pen
CSS Mesh Gradients4 by gri-t (@gri-t)
on CodePen.