こんにちは。デザイナーの森田です。

今回は、メッシュグラデーションをCSSで実装する方法をご紹介いたします。
メッシュグラデーションとは、複数のポイントからグラデーションをさまざまな方向に流し込んだものです。
あえて統一感をなくし、遊び心のあるふわふわとした印象を与えることができます。

きっかけ

自社webサイトコンテンツ作成の中で、背景にメッシュグラデーションのイメージを引きたいと、最初は画像素材でデザインカンプを作成していました。
コーディングの際に、画像を使用する以外の方法はないか調査したところ、CSSで実現できそうなことがわかり、記事にまとめてみました。

CSSグラデーションの基本

グラデーションには、線形グラデーションのlinear-gradient、円形グラデーションのradial-gradient、扇型グラデーションのconic-gradientなどがありますが、今回は円形グラデーション(radial-gradient)を使用します。

円形グラデーション

radial-gradientは、円形グラデーションを指定できるbackgroundの値です。

background-image: radial-gradient(at 水平位置 垂直位置, 開始色 位置, 終了色 位置);

中心から外側へと向かって色が変化していきます。

.box{
  width:300px;
  height:300px;
  background: radial-gradient(at 50% 50%, #000 0, #ccc 100%);
}

円の中心位置の指定

円形グラデーションの中心位置は、atの後ろに続く形で指定します。
半角スペース区切りで1つ目に水平位置・2つ目に垂直位置を指定します。位置はpxや％などの数値か、left・center・topなどのキーワードで指定することもできます。

.box{
  width:300px;
  height:300px;
  background: radial-gradient(at 0 0, #000 0, #ccc 100%);
}

色が切り替わる位置を指定

色の切り替え位置は、色の後ろに半角スペース区切りで％指定します。

.box{
  width:300px;
  height:300px;
  background: radial-gradient(at 0 0, #000 50%, #ccc 100%);
}

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

radial-gradient() をカンマで区切って指定すると、複数のグラデーションを指定できます。

background-image: radial-gradient(at 水平位置 垂直位置, 開始色 位置, 終了色 位置),
    radial-gradient(at 水平位置 垂直位置, 開始色 位置, 終了色 位置);

この時、上に指定するほど重なり合いの優先度が高くなり、前面に表示されます。
また、終了色をtransparentとすることで、透明色が指定でき、複数の色を重ねることができます。

.box{
  width:300px;
  height:300px;
  background: radial-gradient(at 0 0, #0079FF 0, transparent 50%),
    radial-gradient(at 70% 30%, #00DFA2 0, transparent 40%),
    radial-gradient(at 50% 100%, #F6FA70 0, transparent 80%);
}

transparentの位置の％を指定すると、開始色の色の広がるサイズも調整できます。

ジェネレーターで簡単に実装も

便利なグラデーションのCSS生成ツール「Mesher Tool 」をご紹介。
Mesher Toolを使えば、色や色の数、色の順番、色の位置を任意に指定でき、直感的に作りたいメッシュグラデーションを生成できます。右下のExportをクリックすると、CSSのコードが生成されます。

さいごに

実際に作成したページはこちら

Xamarin・MAUI技術支援サポート

CSSで実装すれば、画像を使用するより軽量で、後から自由に変更もできるため便利だと思います。
また、レスポンシブにも対応できるため、PCとスマホ表示での切り替えも可能です。
色の組み合わせ、位置、大きさで表現の可能性は無限大！ぜひお試しください。

当社は、Webサイト制作をはじめ、.NET6+・MAUI(旧Xamarin)を利用したモバイルアプリ開発から、Power Platformでのローコード開発など、幅広い開発ニーズにお応えします。コンサルティングや常駐開発など、関わり方も柔軟に対応できますので、まずはお気軽にご相談ください。