色の点をドラッグするだけで、オーロラのようなメッシュグラデーション背景を作れる無料のグラデーションメーカー。PC・スマホ壁紙やSNSサイズでのPNG保存、Webにそのまま貼れるSVG・CSSコードの書き出し、ノイズ質感やアニメーションにも対応しています。
1200 × 800px ・ 標準 3:2 ・ 丸いポイントをドラッグして配置を調整
カラー光源レイヤー3/8
クイック・プリセット
出力サイズ（壁紙・SNS）
全体設定
書き出し
CSSは radial-gradient による近似表現です（アニメーション・ノイズは含みません）。PNGは静止画で保存されます。
メッシュグラデーション生成ツール（グラデーションメーカー）の特徴
このツールは、キャンバス上に配置した複数の「カラー光源」をガウスぼかしで合成し、オーロラや液体のような有機的なメッシュグラデーション背景を生成するグラデーションメーカーです。 プレビュー上の色の点をドラッグして直感的に配置でき、PC・スマホの壁紙やInstagram・YouTubeサムネイルなどのサイズ指定でPNG保存が可能。Web制作向けには、画像を使わずに軽量に実装できるSVGコード・CSSコードの書き出しにも対応しています。
こんなシーンで便利です
Webサイトのヒーロー背景・CSS背景に
ファーストビューにアニメーション付きSVGを配置したり、CSSコピーで任意の要素の background に貼り付けたり。画像ファイル不要で軽量なグラデーション背景を実装できます。
PC・スマホの壁紙作成
出力サイズで「PC壁紙 16:9」「スマホ壁紙 9:16」を選び、PNG 2xで保存すれば高精細なオリジナル壁紙になります。ノイズを加えると落ち着いた質感に仕上がります。
SNS投稿・サムネイル・アイキャッチ
Instagram（1:1）やYouTubeサムネイル、ブログのOGP画像の背景に。境界の曖昧な色彩は上に載せる文字を邪魔せず、デザイン全体の質を底上げします。
プレゼン資料・Figmaのデザイン素材
ブランドカラーを混ぜたグラデーションをPNGでKeynoteやPowerPointへ、SVG保存でFigmaやIllustratorへ。ベクターデータのまま編集を続けられます。
使い方は簡単 5ステップ
- 「クイック・プリセット」で雰囲気を選ぶか、「ランダム配色」でアイデアを出します。
- 「出力サイズ」から用途（PC壁紙・スマホ壁紙・SNS・OGPなど）に合うサイズを選びます。
- プレビュー上の丸いポイントをドラッグするか、各レイヤーの「PosX / PosY」で色の位置を調整します。
- 「Size」「ぼかしの強度」「ノイズ（粒状感）」で色の混ざり具合と質感を整え、必要に応じてアニメーションを付けます。
- Web用は「SVGコピー」「CSSコピー」、画像素材は「PNG保存（1x/2x）」または「SVG保存」で書き出します。
※カラー光源レイヤー右上の『ランダム配置』を押すと、現在の配色のまま新しい配置パターンが自動生成されます。気に入るまで何度でも試せます。
ご利用時の注意点
- SVGコードの活用：インラインSVGとして貼り付けると親要素いっぱいに広がり、縦横比が変わっても歪まずに表示されます（preserveAspectRatio="xMidYMid slice"）。
- CSSコードについて：radial-gradient を重ねた近似表現です。ノイズとアニメーションは含まれないため、完全な再現にはSVGをご利用ください。
- 解像度：PNGは選択した出力サイズで保存され、2xを選ぶと縦横2倍（例：1920×1080 → 3840×2160）になります。アニメーションは含まれません。
メッシュグラデーションの書き出し形式と使い分け
用途（Web実装・壁紙・SNS・デザインツール）に応じた最適な書き出し形式の比較です。
| 書き出し形式 | 主なメリット | 推奨される用途 | 表示速度・注意点 |
|---|---|---|---|
| SVGコピー（インライン） | 超軽量・解像度無限・アニメ可 | Webサイトの背景・ヒーローエリア | HTTPリクエスト不要（最速） |
| CSSコピー | background に貼るだけ | カード・ボタン・セクション背景 | 近似表現（ノイズ・動きなし） |
| PNG保存（1x / 2x） | 環境を選ばない汎用性 | 壁紙・SNS・スライド・サムネイル | Web掲載時はWebP等へ圧縮推奨 |
| SVG保存（ファイル） | ベクターのまま編集可能 | Figma・Illustratorでの再編集 | ツールによりぼかし表示が異なる |
【SEOと表示速度へのメリット】
SVGコードやCSSコードは、画像ファイルとは異なりブラウザが直接描画するため、PageSpeed Insightsのスコアを落とすことなくリッチなグラデーション背景を実装できます。
【デザインのトレンド：Fluid & Grain】
境界線のないメッシュグラデーションに、うっすらとノイズ（グレイン）を重ねる表現が定番になっています。背景に文字を載せる場合は、「ぼかし」を大きめ、ノイズを10〜20程度に設定し、彩度をわずかに落とした色を組み合わせると上品に仕上がります。
グラデーション背景を用途別に美しく仕上げる実践テクニック
グラデーションメーカーで作った背景を、壁紙・SNS・Webサイト・UIデザインへ違和感なく落とし込むためのノウハウです。
壁紙・スマホ待ち受け用のグラデーションを作るコツ
スマホ壁紙では時計やアイコンが上下に重なるため、画面中央〜下部に明るい色、上部に暗めの色を配置すると視認性が保てます。
出力サイズを「スマホ壁紙 9:16」にしてPNG 2xで保存すれば、高解像度ディスプレイでもぼやけない待ち受け画像になります。
CSSでグラデーション背景を実装する方法
「CSSコピー」で出力した .mesh-gradient クラスを、任意のセクションやカード要素に付与するだけで背景が適用されます。
各光源は radial-gradient の楕円サイズと位置で表現されているため、要素の縦横比が変わっても比率を保って伸縮します。Tailwind CSSでは任意値クラスやグローバルCSSに貼り付けて利用できます。
ダークモードで発光レイヤーとして使う配置テクニック
黒基調のUIでは、Baseに暗い色（例：Neon Nightプリセット）を選び、光源を画面の端寄りに小さめに配置すると、ネオンのような発光感が出ます。
さらに親要素のCSSにmix-blend-mode: screenを指定すると、下地に自然に馴染むグロー表現になります。
ブランドカラーやデザイントークンとの連携
各光源のカラーコード欄にブランドカラー（Hex）を直接入力すれば、コーポレートカラーに沿ったグラデーションが作れます。
書き出したSVGの fill 属性やCSSの色指定を CSS変数（例：var(--color-primary)） に置き換えておくと、テーマ変更時に一箇所の修正で全体へ反映できます。
よくある失敗と対策
アニメーション付きSVGをimgタグで読み込んで動かない・表示が崩れる
アニメーション付きSVGを .svg ファイルとして保存し、imgタグ（src="image.svg"）で読み込むと、環境によって動きが止まったり、ぼかしの表示が変わったりする失敗です。
💡 対策・解決策を見る▼
補色を近くに置きすぎて境界線が濁る
赤と緑、青と黄色など補色関係にある鮮やかな光源を近くに配置した結果、混ざり合う部分がくすんだ灰色や茶色に濁ってしまう失敗です。
💡 対策・解決策を見る▼
背景とテキストのコントラスト不足で読みにくくなる
ヒーローセクションの背景にグラデーションを採用したものの、背景色と文字色が重なりコントラスト比（WCAG基準）を満たさず、可読性やアクセシビリティ評価が低下する失敗です。
💡 対策・解決策を見る▼
PNGをそのままWebにアップして表示速度を落とす
壁紙やSNS用に書き出した高解像度PNGを、そのままWebサイトの背景画像として配置し、ファイルサイズの大きさでモバイルの読み込み速度を低下させる失敗です。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.アニメーション付きのグラデーションも作成できますか
A. はい、作成可能です。「アニメーション」スイッチを有効にすると、配置した各カラー光源がゆっくりと動く幻想的なエフェクトを付与できます。動きはSVGコピー・SVG保存で書き出したコードにそのまま含まれます（PNG保存とCSSコピーは静止状態で出力されます）。
Q.CSSだけでメッシュグラデーションを使えますか
A. はい、「CSSコピー」で複数の radial-gradient を重ねたCSSコードを出力できます。画像やSVGファイルを使わずに、任意の要素の background として貼り付けるだけで利用できます。CSSはぼかしを擬似的に再現した近似表現のため、ノイズやアニメーションも含めて完全に再現したい場合はSVGをご利用ください。
Q.PC・スマホの壁紙やSNS用のサイズで作れますか
A. はい、「出力サイズ」からPC壁紙（1920×1080）、スマホ壁紙（1080×1920）、Instagram（1080×1080）、YouTubeサムネイル（1280×720）、OGP（1200×630）を選べます。幅と高さは100〜4000pxの任意の数値にも変更でき、PNGは2倍解像度（例：3840×2160）での保存にも対応しています。
Q.グラデーションメーカーとして2色だけのシンプルな背景も作れますか
A. はい、作成できます。光源レイヤーを2色にして配置とサイズを調整すれば、柔らかな2色グラデーション背景になります。光源は最大8色まで追加でき、各色のカラーコード入力、ドラッグでの位置調整、大きさ、ぼかしの強度を細かく設定できます。
Q.ザラっとしたノイズ（グレイン）入りのグラデーションは作れますか
A. はい、「ノイズ（粒状感）」スライダーで粒子のテクスチャを重ねられます。のっぺりしがちなグラデーションに紙や写真のような質感が加わり、近年人気のグレイン系グラデーション背景を再現できます。ノイズはSVG・PNGの両方に反映されます。
Q.商用利用やWebサイトへの埋め込みは可能ですか
A. はい、個人利用や商業目的のWebサイト、印刷物、SNS、アプリケーション背景など、用途を問わず自由にご利用いただけます。生成したSVGコード・CSSコード・PNG画像は、そのままHTMLやCSS、デザインツールに組み込めます。
Q.生成したSVGアニメーションはすべてのブラウザで正常に動きますか
A. 最新の主要なWebブラウザであれば、スマートフォンを含め正常にアニメーションが動作します。ただし、一部の古いブラウザやセキュリティ制限のある環境では、アニメーションが機能せず静止画のグラデーション背景として表示される場合があります。
Q.デザイン中の配色データや作成したグラデーションが外部に情報漏洩するリスクはありませんか
A. 一切ありません。当ツールは完全ローカル処理型の安全設計を採用しており、入力または生成された色彩データや設定情報が外部のサーバーへ送信されたり、データベースへ保存されたりすることはありません。すべての処理はお使いのブラウザ上でのみ完結し、ページを閉じればデータは消去されます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。