ヘルプ

メッシュグラデーションをCSSとSVGで書き出す

2〜8色を選ぶと、色を滑らかに溶け合わせたやわらかな背景ができ、色の点をドラッグすると形を整えられます。CSSをコピーを押すと、最新のブラウザならどれでも動くメッシュグラデーションのCSSを取得でき、SVGをダウンロードを押すと、どんな大きさにも拡大縮小できる1600 × 1200のファイルを保存できます。処理はすべてブラウザ内で行い、WebGL、アップロード、アカウントは使いません。

メッシュグラデーションの作り方

  1. プレビューを見てください。上に表示される小さな丸い点が色の点で、メッシュ内の色の塊ひとつにつき点がひとつあります。
  2. ランダムを押すと、パレットと配置がランダムに新しくなります。イメージに近づくまで何度でも押せます。
  3. 色の行を開き、色見本をクリックして好きな色を選んでください。色を追加で色を増やせ（最大8色）、色見本の小さな×で減らせます（最小2色）。
  4. 複雑さのスライダーを2〜6の間で動かすと、メッシュの色の点の数が変わります。
  5. 点をドラッグすると動かせます。マウスでも指でも操作できます。キーボードの場合は点を選んで矢印キーを押してください。Shiftキーを押しながらだと大きく動きます。
  6. プレビューが気に入ったら、CSSをコピーまたはSVGをダウンロードを押してください。コピー完了または保存済みの表示で完了がわかります。

プレビューは何を変えてもすぐに更新され、CSSコードの欄には、見えているとおりのCSSがいつも表示されます。複雑さを変えたり「ランダム」を押したりすると点が配置し直されるため、ドラッグした点も新しい位置に戻ります。

複雑さのはたらき

複雑さを上げると、複雑さ × 複雑さの格子状に色の点が並び、各点にパレットの色が1色ずつ割り当てられます。点が多いほど色の塊が小さく、変化に富んだメッシュになり、少ないほど広くシンプルな色の面になります。

注意点がひとつあります。色は点に順番に割り当てられるので、パレットの色数がメッシュの点の数より多くなることがあります。複雑さ2では点が4つしかないため、6色のパレットでも同時に見えるのは最大4色です。残りの色を表示するには、複雑さを上げてください。

メッシュグラデーションCSSをそのまま貼り付け

CSSコードの欄には2つの宣言が入っています。background-color（パレットの平均色で、隅が空白にならないようにするためのものです）と、色の点ごとにradial-gradient()を1枚ずつ重ねたbackground-imageです。画像ファイルやスクリプトを使わない、ふつうのCSSです。

各レイヤーは中心の濃い色から縁の完全な透明へ薄れていき、レイヤー同士が重なることで色が溶け合います。大きさと位置はパーセントで指定されているため、適用した要素に合わせて伸縮します。

SVGで保存して使う

SVGをダウンロードを押すと、メッシュグラデーション.svgが保存されます。ファイルのviewBoxは1600 × 1200で、同じ平均色のベースの長方形と、色の点ごとのradialGradientが入っています。ベクター形式なので、スマートフォンの壁紙、スライドの背景、SNS投稿の背景にしてもくっきりしたままです。4:3ではない枠では、引き伸ばさず、枠を埋めて端を切り取ります。

PNGが必要な場合は、SVGを読み込めるブラウザやエディタで開き、好きなサイズで書き出してください。

グラデーション背景のCSSと使いどころ

どちらの出力も、今のプレビューをそのまま写したものです。もう一度ランダムにした場合は、新しい結果をコピーまたはダウンロードし直してください。

よくある質問

メッシュグラデーションのCSSをコピーできるジェネレーターはありますか？

はい、このツールです。「CSSコード」の欄に、background-colorと、色の点ごとに重ねたradial-gradient()でできたbackground-imageが表示されます。JavaScriptも画像ファイルも使わない標準のCSSなので、最新のブラウザならどれでも動きます。「CSSをコピー」を押して、スタイルシートやstyle属性に貼り付けてください。

メッシュグラデーションをSVGで保存できますか？

はい。「SVGをダウンロード」を押すと、viewBoxが1600 × 1200のファイルが保存されます。radialGradientのレイヤーでできているので、どんなサイズでもくっきり表示されます。4:3ではない枠では、引き伸ばさず、枠を埋めて端を切り取ります。

グラデーション背景をWebサイトで使うにはどうしますか？

CSSをコピーして、色を付けたい要素（ヒーローセクションやbodyなど）のルールに2つの宣言を貼り付けてください。色の塊はパーセントで配置されているので、要素に合わせて伸縮します。選んだ色の上でも文字が読めるか確認してください。

メッシュグラデーションをPNGで保存できますか？

直接はできません。このツールが書き出すのはCSSとSVGで、PNGには対応していません。保存したSVGをSVGを読み込めるブラウザやエディタで開き、必要なピクセルサイズで書き出すかスクリーンショットを撮ってください。

メッシュグラデーションを動かせますか？

いいえ。このツールが作るのは動かない1枚のグラデーションです。点をドラッグしたり色を変えたりはできますが、書き出されるCSSとSVGは動きません。

Illustratorのグラデーションメッシュと同じものですか？

いいえ。Illustratorのグラデーションメッシュは、編集できるベクターのパッチを格子状に並べたものです。このジェネレーターは、色の点ごとにやわらかな放射状グラデーションを重ね合わせます。なめらかな多色の見た目は似ていますが、書き出されるのはふつうのCSSまたはSVGです。

グラデーション背景のCSSはどう作ればいいですか？

このツールで色を選び、点を動かして形を整えてから、CSSをコピーしてください。グラデーション背景のCSSが、色の点の数だけ重なった形で手に入ります。ふつうの2色グラデーションではなく、色が溶け合うメッシュ状の背景を作りたいときに向いています。

おすすめ

無料でツールを続ける支えになります。✨

画像はイメージです。 Amazonのアソシエイトとして、Capsule Toolsは適格販売により収入を得ています。

関連ツール

ファビコン生成

画像からファビコン、アイコン、manifest作成

アプリスクリーンショット作成器

App Store・Playストア用の枠付き画像を生成

画像カラーピッカー

写真からHEX、RGB、色名を取得

カラーコントラストチェッカー

AA/AAA判定付きのWCAGコントラスト比チェッカー

Web用画像変換

RAW、HEIC、DNGをWeb用JPGに変換