メッシュグラデーションとは、複数のポイントで色を指定したグラデーションのことです。あえて統一感をなくすことで、遊び心のあるふわふわした印象となります。このメッシュグラデーションをCSSで作成してみましょう！

↑私が10年以上利用している会計ソフト！

基本の円形グラデーション

まずは基本的な円形グラデーションの指定方法です。background-image プロパティーで radial-gradient() のカッコ内に開始色と終了色をカンマで区切って指定します。

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

この時、色を transparent とすると、透明色が指定でき、後述する複数の色を重ねる時に利用できます。ついでに background-attachment: fixed; を合わせて指定すれば要素いっぱいに色を広げられます。

See the Pen
CSS radial-gradient Basic by Mana (@manabox)
on CodePen.

複数のグラデーションカラーを指定

続いて複数のグラデーションカラーを重ねる方法です。上記の radial-gradient() をカンマで区切って指定するだけ！

background-image:
  radial-gradient(色1, transparent),
  radial-gradient(色2, transparent);

See the Pen
CSS multiple radial-gradient by Mana (@manabox)
on CodePen.

ただ、初期値だとどちらの色も要素の真ん中に表示されるので（これはこれでキレイですが）、少し位置をずらしてメッシュっぽくしていきます。

グラデーションの位置を指定

位置の指定には radial-gradient() のカッコ内に at 横の位置 縦の位置 で指定できます。横の位置が 0 なら左端、100% なら右端。縦の位置は 0 なら上、100% なら下です。単位は % 以外にも px などで指定可能です。

background-image: radial-gradient(at 横の位置 縦の位置, 開始色, 終了色)

以下の例では左上に#ff0、右から60%・最下部に#ff0を指定しました。

See the Pen
CSS radial-gradient position by Mana (@manabox)
on CodePen.

四隅に色を入れるとなかなか幻想的です！

See the Pen
CSS multiple radial-gradient 4 colours by Mana (@manabox)
on CodePen.

ちなみに上に記述した色が前面に表示されるので、重なり具合を見ながら調整するといいでしょう。

グラデーションが広がる大きさを指定

円形グラデーションはグラデーション光線の中心点と末端までを0〜100%で構成されています。指定する色が始まる地点を指定すれば、グラデーションの広がり具合を調整できます。指定方法は色の指定の後に半角スペースで区切って記述します。

background-image: radial-gradient(開始色 位置, 終了色 位置)

See the Pen
CSS radial-gradient size by Mana (@manabox)
on CodePen.

ちなみに開始色と終了色の位置を同じ値にするとぼかしがなくなります。これはこれで別の表現ができるのですが、今回は割愛。

メッシュグラデーションギャラリー

いろんなパターンを作ってみました！配色を考えるのも位置を考えるのも楽しいー！参考にしてみてください！

See the Pen
CSS Mesh Gradients 1 by Mana (@manabox)
on CodePen.

See the Pen
CSS Mesh Gradients 2 by Mana (@manabox)
on CodePen.

See the Pen
CSS Mesh Gradients 3 by Mana (@manabox)
on CodePen.

See the Pen
CSS Mesh Gradients 4 by Mana (@manabox)
on CodePen.

便利なジェネレーターもあります

Mesher Toolを使えば複雑なメッシュグラデーションのCSSコードを楽に生成できちゃいます。画面上にある点を動かしてグラデーションの位置を変えたり、「Rondomize」ボタンからランダムに色を表示してくれます。画面右下の「Copy CSS」ボタンからCSSコードをコピーできますよ。

選択する色や位置、大きさ次第で様々な表現が可能となりますね！今回紹介した指定方法以外の書き方もあるので、ぜひ確認してみてください！

radial-gradient() – CSS: カスケーディングスタイルシート | MDN