CSSメッシュグラデーション生成ツール
4つのコーナーカラーから柔らかいマルチカラーメッシュグラデーションを作成 — ベースカラー上に放射グラデーション層として積み重ねられ、ブレンドサイズ、フォールオフ、オプションのグレーンオーバーレイで制御可能（またはSVG形式）。
入力
コーナーの色
メッシュの後ろに表示される背景色。
メッシュ設定
値が大きいほど、より柔らかく広がったブロブが生成されます。
各色が透明にフェードする箇所（低い値 = 鋭いエッジ）。
出力形式
出力
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-gradient-mesh-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"colorTopLeft": "#ff6b6b",
"colorTopRight": "#feca57",
"colorBottomLeft": "#48dbfb",
"colorBottomRight": "#5f27cd",
"colorBase": "#1a1a2e",
"blendSize": "60",
"falloff": "50",
"enableGrain": "",
"grainIntensity": "25",
"outputFormat": "css"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-gradient-mesh-generator` tool (CSS Gradient Mesh Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-gradient-mesh-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSSメッシュグラデーション生成ツール — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
メッシュグラデーションとは?
メッシュグラデーション（「グラデーションメッシュ」または「ブロブグラデーション」とも呼ばれます）は、単一の直線または放射グラデーションではなく、複数の色ポイントを一緒にブレンドして作成された柔らかいマルチカラーの背景です。通常のCSS linear-gradient または radial-gradient が1つの軸に沿って2～3のストップ間でのみスムーズに遷移する場合、メッシュグラデーションはボックス全体に色を分散させます — Stripeのマーケティングページ、Mesher、そして無数の「オーロラ」または「ブロブ」ヒーロー背景に人気があるルックです。
このツールは純粋なCSSでエフェクトを構築します：4つの異なる色、各コーナーに1つずつ固定（左上、右上、左下、右下）、各色は独自の radial-gradient() レイヤーとしてレンダリングされます。すべての4つをベース色の上に波括弧で区切られた background-image レイヤーとしてスタックすると、柔らかで絵的なブレンドが生成されます — 画像、キャンバス、またはランタイムで必要なJavaScriptはありません。
このツールの使い方
- 4つのコーナーカラー — 左上、右上、左下、右下 — および ベースカラーを選択します。これはコーナーのブロブが届かない場所に表示されます。
- ブレンドサイズ % を調整して、各色が透明にフェードするまでどの程度広がるかを制御します — 大きい値はより大きく、より柔らかく、より重なったブロブを作成します。
- フォールオフ % を調整して、各ブロブがどの程度速くフェードするかを制御します — 低い値は鋭く集中した色のドットを与えます；高い値は色をより段階的に広げます。
- オプションでグレーンオーバーレイを追加を有効にし、その強度を設定して、準備完了のノイズテクスチャレシピ（インライン SVG
feTurbulenceフィルター）を取得します — モダンなメッシュグラデーションヒーローセクションで人気のあるタッチで、フラットカラーブレンドが清潔/バンディングに見えるのを防ぎます。 - 出力形式を選択します：
CSSはスタイルシートに直接貼り付けられるbackground-color+ レイヤー化されたbackground-image宣言を提供します；SVGは4つの<radialGradient>定義を備えたスタンドアロン<svg>を提供し、ライブCSSバックグラウンドではなく画像アセットとしてメッシュが必要な場合に便利です。 - 生成されたコードをコピーするか、ダウンロードして、プロジェクトに置きます。
出力は、コントロールを調整するたびにリアルタイムで更新されます — 別の「生成」ステップはありません。
なぜ4つのコーナーなのか？
コーナーに固定された4つのブロブは、単一のブロブまたは2色の対角フェードではなく、本物の「メッシュ」として機能する最もシンプルな配置です — ボックスの各コーナーは独自の色を取得し、中央は自然なブレンドゾーンになります。また、生成されるCSSを短く保ちます：4つの radial-gradient() レイヤー、追加のマークアップなし、維持するポジショニング数学なし。
FAQ
すべてのブラウザーで動作しますか?
はい。レイヤー化された radial-gradient() 背景と複数のコンマ区切り background-image 値は、多年にわたってすべてのメジャーブラウザーでサポートされています — ベンダープレフィックスは不要です。
4色以上を使用できますか? このツールではできません — 4コーナーのケースの周りに構築されており、メッシュグラデーション使用例の大多数をカバーしながら、手動で読み取りおよび編集しやすい状態を保ちます。メッシュグラデーションの場合、4つの色のいずれかを好みに調整できます。
CSS出力とSVG出力の違いは何ですか?
CSS出力は、スタイルシートまたは style 属性に直接貼り付けることを目的とした background 宣言です — ライブで解像度非依存の背景としてレンダリングされます。SVG出力はスタンドアロン画像（放射グラデーション定義を備えた <svg> 要素）です — ライブCSSバックグラウンドではなくファイルまたは埋め込み画像としてメッシュグラデーントが必要な場合に使用します。
グレーンオーバーレイが背景に焼き込まれていない別のCSSブロックなのはなぜですか?
グレーンはメッシュの上に配置された mix-blend-mode: overlay として機能するのが最適なため、ノイズは下の色にブレンドされ、置き換えられません。ツールは準備完了の .mesh-grain ルール（ノイズがインラインSVGデータURIとして事前エンコードされている）を出力します — グラデーションコンテナーの内部にそのクラスを持つ子要素を追加します。
プライバシー
すべてはブラウザーで起こります。選択した色と設定がサーバーに送信されることはありません — CSSまたはSVGは生成され、コントロール調整時にローカルで更新されます。