メッシュグラデーション生成
4つの色のスポットと背景色を組み合わせ、静止またはアニメーション付きのメッシュグラデーションを作成します。位置と広がりを調整し、プリセットやランダム生成も使えます。CSS、Tailwindクラス、SVGをコピーし、静止画のPNGを保存できます。すべてブラウザ内で生成します。
プリセット
プリセットを選ぶとすべての設定が一度に反映されます。そこから微調整できます。
色
ヒント：プレビュー上の番号付きハンドルをドラッグして各ブロブを移動できます。矢印キーで微調整、Shiftで大きく移動します。
プリセットはワンクリックですべての設定を反映し、ランダム生成は同じことを乱数で行います。
CSS
.mesh {
background-color: #070b1a;
background-image:
radial-gradient(ellipse 45% 45% at 88% 82%, #0ea5e9 0%, rgb(14 165 233 / 0.55) 70%, rgb(14 165 233 / 0) 100%),
radial-gradient(ellipse 60% 60% at 42% 78%, #a855f7 0%, rgb(168 85 247 / 0.55) 70%, rgb(168 85 247 / 0) 100%),
radial-gradient(ellipse 52% 52% at 74% 30%, #22d3a5 0%, rgb(34 211 165 / 0.55) 70%, rgb(34 211 165 / 0) 100%),
radial-gradient(ellipse 58% 58% at 18% 22%, #5b8cff 0%, rgb(91 140 255 / 0.55) 70%, rgb(91 140 255 / 0) 100%);
border-radius: 0px;
}CSSは放射グラデーションの重ね合わせです。ブロブごとに1つずつ、それぞれ透明へ向けて減衰し、その下に背景色が敷かれます。継ぎ目が見えないのは、混ざっているのではなく重なっているからです。
Tailwindクラス
bg-[#070b1a] rounded-[0px] bg-[image:radial-gradient(ellipse_45%_45%_at_88%_82%,_#0ea5e9_0%,_rgb(14_165_233_/_0.55)_70%,_rgb(14_165_233_/_0)_100%),_radial-gradient(ellipse_60%_60%_at_42%_78%,_#a855f7_0%,_rgb(168_85_247_/_0.55)_70%,_rgb(168_85_247_/_0)_100%),_radial-gradient(ellipse_52%_52%_at_74%_30%,_#22d3a5_0%,_rgb(34_211_165_/_0.55)_70%,_rgb(34_211_165_/_0)_100%),_radial-gradient(ellipse_58%_58%_at_18%_22%,_#5b8cff_0%,_rgb(91_140_255_/_0.55)_70%,_rgb(91_140_255_/_0)_100%)]任意値をそのまま使うため、数値はすべて正確です。近い刻み幅に丸められることはありません。
メッシュグラデーション生成はどう動きますか？
各スポットは楕円の放射状グラデーションです。中心の位置は要素の幅と高さに対する割合で指定し、広がりはそれぞれの寸法に対する半径を決めます。4番目のスポットが最前面に描かれ、色の届かない部分には背景色が見えます。
色は不透明から透明へと変化します。出力コードでは、終点でも元の色のRGB値を保ったままアルファをゼロにします。標準のCSSもアルファを事前乗算して補間するため、`transparent`だけで灰色の縁が生じるとは限りません。背景色や半透明の重なりも最終的な色に影響します。
任意のアニメーションは6〜30秒の周期でスポットを動かします。CSSでは`@property`で登録したカスタムプロパティを、SVGでは変形を使います。どちらも`prefers-reduced-motion`に対応し、PNGには初期位置の静止画を書き出します。
プレビューとPNGは同じSVGを使います。CSSも位置、色、レイヤーの順序を合わせています。大きな背景のアニメーションは負荷が増えるため、使用する端末で動作と文字のコントラストを確認してください。
グラデーションの設定
背景色 #070b1a ブロブ 1 #5b8cff · 18%, 22% · 58% ブロブ 2 #22d3a5 · 74%, 30% · 52% ブロブ 3 #a855f7 · 42%, 78% · 60% ブロブ 4 #0ea5e9 · 88%, 82% · 45%
生成したCSS
.mesh {
background-color: #070b1a;
background-image:
radial-gradient(ellipse 45% 45% at 88% 82%,
#0ea5e9 0%, rgb(14 165 233 / 0.55) 70%, rgb(14 165 233 / 0) 100%),
radial-gradient(ellipse 60% 60% at 42% 78%,
#a855f7 0%, rgb(168 85 247 / 0.55) 70%, rgb(168 85 247 / 0) 100%),
radial-gradient(ellipse 52% 52% at 74% 30%,
#22d3a5 0%, rgb(34 211 165 / 0.55) 70%, rgb(34 211 165 / 0) 100%),
radial-gradient(ellipse 58% 58% at 18% 22%,
#5b8cff 0%, rgb(91 140 255 / 0.55) 70%, rgb(91 140 255 / 0) 100%);
}メッシュグラデーション生成が対応するオプションとエッジケースは？
| パラメータ | 型 | デフォルト | 動作とエッジケース |
|---|---|---|---|
| スポットの位置 | 0–100% | — | スポットの中心を、要素の幅と高さに対する割合で指定します。 |
| 広がり | 割合 | 58% | 楕円の半径を幅と高さそれぞれに対する割合で指定します。その範囲の端で色が透明になります。 |
| 背景色 | 16進数 | #070b1a | すべてのスポットの背面と、グラデーションの透明な部分に表示されます。 |
| 透明になる終点 | アルファ0のrgb() | 自動 | グラデーションの終点に、元の色と同じRGB値でアルファ0の色を使います。 |
| レイヤーの順序 | 背面から前面 | ブロブ4が最前面 | 4番目のスポットを最前面に描きます。CSSのグラデーション一覧を逆順にしてSVGと合わせます。 |
| border-radius | px | 0 | 背景の角を丸めます。ゼロの場合は角丸を付けません。 |
よくある質問
CSSでメッシュグラデーションを作るには？
`background-color`の上に、スポットごとの`radial-gradient()`を`background-image`で重ねます。このツールが中心、楕円の半径、透明になる位置を計算し、CSS全体を生成します。
メッシュグラデーションの色の間に灰色の部分が出るのはなぜ？
背景色や半透明のレイヤーの重なりによって、灰色がかった色になることがあります。背景、位置、広がりを調整してください。出力は元の色のアルファをゼロにしますが、標準のCSSも`transparent`へ適切に補間します。
メッシュグラデーションはアニメーションできますか？
はい。アニメーションを有効にし、周期を6〜30秒で設定できます。CSSの`@property`と`@keyframes`はクラスと一緒に使ってください。SVGもアニメーションに対応します。`prefers-reduced-motion`で動きを止め、PNGは静止画として出力します。
メッシュグラデーションは性能に影響しますか？
負荷は要素の大きさ、アニメーション、端末によって変わります。大きな領域では静止版や小さな背景を検討し、スマートフォンでも確認してください。動きが不要なら、PNGを書き出して使う方法もあります。
メッシュグラデーションはテキストの背景に使えますか？
はい。ただし、文字のある範囲全体で十分なコントラストを確保してください。最も明るい部分と暗い部分を確認し、必要なら文字の後ろに不透明な面を置くか、色を調整します。
メッシュグラデーションと線形グラデーションの違いは？
線形グラデーションは1つの軸に沿って色が変化します。メッシュグラデーションは複数の色の中心を2次元で組み合わせます。このツールは4つの楕円形の放射状グラデーションで表現します。