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

純粋な SVG として描かれるメッシュグラデーション

メッシュグラデーション — 手塗りのようなカラフルな多点背景 — は、Stripe や Linear のマーケティングページで象徴的になりました。このジェネレーターは、画像ファイル、WebGL、キャンバスを一切使わずに、小さな独立した SVG として同じ効果を生成します。

テクニック

CSS と SVG はまだ完全なメッシュグラデーションをサポートしないため、ツールは柔らかい放射状グラデーションを複数重ねます。各グラデーションは、選択した (x, y) 位置の色から外側に向かって透明へフェードします。ソリッドカラーの背景の上に重ねると、これらの放射状のプールが互いに滲み合い、手描きのメッシュのような印象を再現します。

このアプローチは非常に移植性が高く、生成される SVG は標準の <radialGradient> と <rect> のみを使用 — フィルターもスクリプトもなし — SVG 対応環境ならどこでも動作します。

コントロール

• ポイント — 2〜6 個のカラーブロブ。それぞれ独自の色と X/Y スライダー。
• ソフトネス — 各放射状グラデーションの半径。低ソフトネス = タイトで鮮やか、高ソフトネス = 柔らかなパステル。
• 背景 — ブロブの背後のソリッドカラー。
• 再配置 — パレットを保ったまま位置をランダム化して即興のインスピレーションを。

用途

• モダンな SaaS のヒーロー背景
• アプリのスプラッシュ画面
• ポッドキャスト / 音楽のジャケット
• プロダクトモックアップとマーケティングバナー
• ブログやドキュメントサイトの背景

preserveAspectRatio="none" のおかげで SVG は任意のコンテナに伸縮でき、1 ファイルがどのブレイクポイントでも全幅背景として機能します。グレイニーグラデーションやノイズテクスチャジェネレーターと組み合わせれば、触感のあるモダンなルックになります。