メッシュグラデーションジェネレーター
メッシュグラデーションジェネレーター：色の点をドラッグしてCSSをコピー | We.Inc
キャンバス上で色の点をドラッグしてやわらかなメッシュグラデーションを作り、放射状グラデーションを重ねた純粋なCSSをコピーするか、PNGをダウンロードできます。無料で、ブラウザー内で動作します。
メッシュグラデーションジェネレーター
メッシュグラデーションは、1本の線に沿うのではなく、複数の色の点を面全体で混ぜ合わせるグラデーションです。Webでは、ベースの色の上に点ごとにradial-gradientを1つずつ重ねることで、純粋なCSSで再現できます。下の点をドラッグし、それぞれの色と広がりを設定してから、CSSをコピーするかPNGを保存しましょう。
目的に合うグラデーションツール
- スクリプト不要の、静止したやわらかいぼかし背景
- このメッシュジェネレーター
- CSSまたはPNG
- ゆっくり動く背景
- シェーダーグラデーションジェネレーター
- WebGLコンポーネント
- 2〜5色の線形、放射状、円錐グラデーション
- CSSグラデーションジェネレーター
- グラデーション1行
ここで置く点は、それぞれ独立した放射状グラデーションになり、ベースの色の上に描かれます。結果は普通のCSSなので、ダウンロードは不要、サイトにJavaScriptも要らず、どんなサイズのボックスでもぼやけずに拡大縮小できます。
- プリセットを選ぶかデフォルトのままにして、キャンバス上の番号付きハンドルをドラッグしてその色を動かします。
- キーボードでは、ハンドルにフォーカスして矢印キーで少しずつ動かすか、点のリストにXとYの値を正確に入力できます。
- 点の色と広がりを変えます。広がりは色が完全に透明になる位置で、点からボックスの最も遠い角までの距離に対する割合で表します。
- 点は最大8個まで追加でき、余分な点は削除できます。最後にCSSをコピーするか、好きなサイズでキャンバスをPNGとしてダウンロードします。
- 点は8個より3〜5個のほうが豊かに見えることが多いです。レイヤーが増えるほど、中央が濁りがちです。
- パステル調にしたいならベースの色を最も明るい点に近づけ、光る夜のスタイルにしたいならごく暗くしましょう。
- 見出しのテキストは最も落ち着いた部分に置き、その下の最も明るい箇所と最も暗い箇所でコントラストを確認しましょう。
- PNGはメールやSNS用の画像に便利です。CSSの背景はデザインと一緒に持ち出せないからです。
よくある質問
これは本物のメッシュグラデーションですか？
ベクター編集ソフトなどのデザインアプリは、パッチのグリッドから本物のメッシュを作ります。CSSにはメッシュ関数がないため、このツールは放射状グラデーションを重ねています。背景やヒーローセクションには、同じようにやわらかく多色の雰囲気が出せます。
シェーダーグラデーションジェネレーターとの違いは？
シェーダーのツールはWebGLでアニメーションするグラデーションを描き、スクリプトを実行するコンポーネントを書き出します。こちらはCSSだけで静止画像を作るので、すぐに表示され、印刷でき、スクリプトがブロックされる環境でも動きます。
各色が、その色自身の透明版へとフェードするのはなぜですか？
キーワードのtransparentに向けてフェードすると、補間方式によっては端が灰色がかることがあります。各レイヤーを同じ赤、緑、青でアルファだけ0にして終えると、縁がきれいに保たれます。
このCSSをTailwindで使えますか？
はい。宣言をスタイルシートのクラスに入れるか、インラインのままにしたい場合はbackground-imageの値を[background-image:...]のような任意プロパティに貼り付けてください。
PNGはCSSと完全に一致しますか？
ほぼ一致します。ダウンロード画像は同じ点、色、広がりでキャンバスに描かれますが、ブラウザーによってはキャンバスのグラデーションをCSSと少し違う方法でなめらかにすることがあります。
放射状グラデーションを重ねてメッシュを作る仕組み
- background-imageはカンマ区切りのリストを受け付け、最初に書いたレイヤーが一番上に描かれます。ここでの各レイヤーは1つの点を中心にした円で、中心は不透明、広がりの位置で透明になるため、隣り合う色が重なって混ざります。
- サイズのキーワードを指定していないので、各円はデフォルトのfarthest-cornerサイズになり、色の停止位置の割合はボックスに合わせて伸縮します。そのため、同じ広がりでも中央付近の点は角にある点より広がりが小さく、横長のバナーではすべての円が大きくなります。実際に使う縦横比でプレビューしましょう。
きれいに見せるコツ
- 落ち着いた仕上がりにしたいなら、色相環で近い色を選び、勢いを出したいなら対照的な点を1つだけ加えましょう。点を一部だけ枠の外に出すと、色がフレームの外まで続いているように見えます。
- 大きく暗いグラデーションで縞模様（バンディング）が目立つ場合は、薄いノイズテクスチャの画像を追加のレイヤーとして重ねるか、ベースを少し明るくしましょう。
メッシュを支えるCSS
これはHarbourプリセットを手で書き出したものです。どの値を編集しても、フレーム内の結果が更新されます。
淡いベースに4つの点
radial-gradientの1つ1つが色の点です。先に書いたレイヤーが、後のレイヤーの上に重なります。
各設定が制御するもの
設定と、それが生成するCSS
- 点の位置
- circle at X% Y%
- 色が最も濃くなる場所
- 広がり
- 2番目の停止位置（例：55%）
- 最も遠い角までの距離のうち、色が完全に透明になる位置の割合
- 点の順序
- レイヤーの順序
- 重なる部分では、先の点が後の点を覆います
メッシュグラデーションエディター
キャンバス上の番号付きの色の点をドラッグし、それぞれの色と広がりを設定してから、CSSをコピーするかPNGをダウンロードします。プリセット：ハーバー、アプリコット、ナイトシフト、メドウ。
プリセット
点{n}、位置{x}% {y}%。矢印キーで移動できます。
ベースの色
色
広がり {n}%
削除
点を追加
CSSをコピー
PNGの幅
PNGの高さ
PNGをダウンロード
無料で始める · クレジットカード不要
関連: 無料ツール｜ビジネス向け計算・生成ツール
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る