基本的なグラデーション

基本的なグラデーションはbackgroundプロパティにlinear-gradient()で線形グラデーションをradial-gradient()で円形グラデーションを表現することができます。それぞれの括弧内には開始色と終了色を指定してあげます。

CSS

background: radial-gradient(開始色, 終了色);

下記は、radial-gradient()で円形グラデーションを要素いっぱいに表現するために、background-attachment: fixed;も一緒に指定しています。

See the Pen
Untitled
by gri-t (@gri-t)
on CodePen.


グラデーションの位置を指定する方法

グラデーションの中心位置は、radial-gradient(at 横の位置, 縦の位置);として、括弧内にat 横の位置(左を0、右を100%)と縦の位置(上を0、下を100%)を指定して設定します。数字の単位は % 意外に px も使用することができます。

CSS

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%を指定した場合です。一番右側のみ、開始色と終了色の両方を指定しています。位置を記述する場合は、色を指定した後に半角スペースを空けて指定します。

CSS

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.

以上が、以上、複数の色を組み合わせてグラデーションを表現する方法でした。