メッシュグラデーションジェネレーター

重ねた放射グラデーションで、やわらかなメッシュ風のCSS背景を作ります。カラーポイントのドラッグ、広がりの設定、シードによるランダム生成に対応し、純粋なCSSコードをコピーできます。

メッシュ設定

背景色

シード

カラーポイント

色

広がり%

X 位置%

Y 位置%

プレビュー

プレビューのハンドルをドラッグするか、正確な値を入力してください。

CSS コード

background-color: #ff99cc;
background-image:
  radial-gradient(at 0% 0%, #ffb3ba 0, transparent 50%),
  radial-gradient(at 100% 0%, #bae1ff 0, transparent 50%),
  radial-gradient(at 100% 100%, #baffc9 0, transparent 50%),
  radial-gradient(at 0% 100%, #ffffba 0, transparent 50%);

メッシュグラデーションジェネレーターとは？

人気のあるやわらかな「メッシュグラデーション」風の見た目を、素のCSSで作ります。背景色に、それぞれカラーポイントから始まって透明へフェードする複数の放射グラデーションを重ねます。最大8つのポイントを、プレビュー内でドラッグするか、位置を入力して配置できます。

メッシュグラデーションジェネレーターの使い方

背景色を選びます。
カラーポイントを選び、色、広がり、X 位置 / Y 位置を設定するか、プレビュー内でポイントをドラッグします。
点を追加 / 点を削除で、ブレンドする色の数（1〜8）を変えます。
ランダム生成をクリックして新しいメッシュを作るか、シードを入力してシードを適用を押すと、再現可能なものが得られます。
CSSコードをコピーします。

例

入力

Default 4 points, background #ff99cc

出力

background-color: #ff99cc;
background-image:
  radial-gradient(at 0% 0%, #ffb3ba 0, transparent 50%),
  radial-gradient(at 100% 0%, #bae1ff 0, transparent 50%),
  radial-gradient(at 100% 100%, #baffc9 0, transparent 50%),
  radial-gradient(at 0% 100%, #ffffba 0, transparent 50%);

メッシュグラデーションジェネレーターを使うべき場面

ヒーローの背景、ランディングページ、アプリのスプラッシュ画面、グラスモーフィズムのカードの後ろにあるぼかした色の背景に使います。正確で直線的な色の遷移が必要な場合はCSS Gradient Generatorを使ってください。本物のメッシュの変形には、ベクターツールか、canvas/WebGLのシェーダーが必要です。

メッシュグラデーションジェネレーターの仕組み

各ポイントは radial-gradient(at x% y%, color 0, transparent spread%) になり、すべてが background-color の上の background-image に列挙されます。どのグラデーションも透明へフェードするため、色が重なって滑らかにブレンドされます。ランダム生成は、シード付きの擬似乱数生成器（mulberry32）を使い、同じシードと同じポイント数からは、常に同じ色と位置が生成されます。これは本物のメッシュグラデーション（CSSにはありません）の近似であり、双線形パッチメッシュではありません。