メッシュグラデーション生成ツールとは？

Webサイトの背景、SNSグラフィック、UIデザイン向けにマルチカラーのメッシュグラデーションを生成します。色を選び、制御ポイントを配置して、線形やラジアルでは出せない有機的なグラデーションを作れます。

キャンバスは複数の放射状グラデーションを、コントロールポイントごとに1つずつ重ねます。ポイントをドラッグしてブレンドの形を変え、スウォッチで色を入れ替えると、コードがその場で更新されます。最大6点なら結果のバランスが保てます。1920x1080などのバナーサイズでPNGやSVGとして書き出し、SVGをそのままFigmaに貼り付け、あるいはコードをCSS・SCSS・Tailwindとして取得できます。

使い方

1. カラースウォッチをクリックするかHEX値を入力してベースカラーを選択します。最大6つのカラー制御ポイントを追加できます。
2. キャンバス上の制御ポイントをドラッグしてグラデーションの流れを変えます。
3. コードをCSS・SCSS・Tailwindとしてコピーするか、グラデーションをPNGまたはSVGとしてダウンロードします。

使用するタイミング

• テンプレ感のないヒーローセクション用の背景を作るとき。
• 写真を使わずに色でプロダクトカードやプレイリストのアートワークを作るとき。
• アプリのローディング画面や空状態のプレースホルダ背景を用意するとき。

結果

UIデザイナーがランディングページのヒーローセクション用に4つの制御ポイントを使ったパープルからティールのメッシュグラデーションを作成し、CSSをコピーしてスタイルシートに直接貼り付けます。

よくある質問

メッシュグラデーションと線形グラデーションは何が違いますか?

線形グラデーションは1つの軸に沿って2色を混ぜます。メッシュグラデーションは複数の柔らかい色のスポットを重ねるので、結果はくっきりした遷移よりも水彩のにじみに近くなります。色の境界線を見つけにくくなります。

なぜCSSがconic-gradientではなくradial-gradientを使うのですか?

重ねたradial-gradientは最も広いブラウザサポートを持ち、きれいにフォールバックします。ジェネレータは制御ポイント1つにつきradial-gradientを1つ書き出し、background-imageでスタックするので、すべてのモダンブラウザでpolyfillなしに動作します。

SafariとChromeで同じ見た目になりますか?

はい。出力はベンダープレフィックス不要の標準CSS radial-gradientを使います。Safari、Chrome、Firefox、Edgeはどれも同じ結果を描画します。古いブラウザは最初の色にフォールバックします。

制御ポイントは何個まで使えますか?

最大6個です。それ以上増やすと豊かになるどころか濁ってしまうことが多いです。2〜3個だとアールデコ風のすっきりしたグラデーションになり、4〜6個では絵画的なにじみが出ます。

グラデーションをSVGで書き出せますか?

はい。SVGエクスポートは、重ねた radial-gradient レイヤーからグラデーションを組み立てるため、CSSグラデーションが効く場所ならどこでも表示され、Figmaにはシェイプの塗りとしてそのまま貼り付けられます。仕様どおりの本来のSVGメッシュグラデーションはまだどこにも対応がないので、この重ね合わせ方式が、貼り付け先を問わず実際に動くバージョンです。

関連ツール