Softonic

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

4、6、9個の移動可能なポイントから、滑らかな多色背景を作成できます。各ポイントの色を選び、キャンバス上で位置を動かし、厳選されたランダムパレットも試せます。完成したデザインはSVGまたはPNGで書き出せるほか、放射状グラデーションを重ねたCSSの近似表現もコピーできます。作業中のプロジェクトは、このブラウザータブ内に保持されます。

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

  1. 1

    ポイント数を選ぶ

    4、6、9個のコントロールポイントから選びます。数が多いほど、色の領域を細かく作れます。

  2. 2

    色を選ぶ

    各ポイントのカラーピッカーを使います。色は6桁のHEX値で保存されます。

  3. 3

    ポイントを動かす

    ドラッグ、水平・垂直位置の入力、または矢印キーで移動できます。

  4. 4

    出力サイズを選ぶ

    SVGとPNG用に、横長、ワイド、正方形のサイズを選びます。

  5. 5

    書き出す

    PNGまたはSVGを保存するか、放射状グラデーションによるCSS近似コードをコピーします。

3種類の出力方式

  • PNG はプレビューと同じ距離加重の方法で色を混ぜます。異なる縦横比を選ぶと、同じ相対位置のポイントが新しい寸法に合わせて描画されます。
  • SVG は、同じコントロールポイントに放射状グラデーションを重ね、拡大しても鮮明さを保ちます。
  • CSS は、ベース色の上にポイントごとの radial-gradient() レイヤーを作るため、別の画像ファイルが不要です。

SVGとCSSは同じプロジェクト情報を使いますが、メッシュ風の見た目を軽量に近似する方式です。PNGとピクセル単位では一致しません。

パレット選びのヒント

  • 近い色相は穏やかな移り変わりを作りやすくなります。
  • 対照的な色相は領域の境界を強調します。
  • ランダムパレットは出発点であり、文字の読みやすさを保証するものではありません。
  • 背景の上に置く文字、アイコン、操作部品のコントラストを確認してください。

コントロールポイントの配置

プレビュー上の番号付きポイントをドラッグするか、フォーカスして矢印キーで動かします。Shiftを押しながら操作すると、5パーセントポイントずつ移動できます。水平・垂直の入力欄では正確な位置を指定できます。

ポイントは端まで移動できます。複数のポイントを近づけると色が一か所に集まり、離すと各色の範囲が広がります。

主な用途

  • ヒーローセクションの背景や区切り。
  • SNSカードや動画サムネイル。
  • プレゼンテーションやイラストの背景。
  • スプラッシュ画面や装飾パネル。

プレビューに最も近いのはPNGです。鮮明に拡大したい場合はSVG、画像ファイルなしで編集可能な背景が必要な場合はCSSが適しています。

プライバシーと保存

色、位置、解像度はブラウザーのメモリと sessionStorage に残り、ファネルURLやサーバーの状態には追加されません。書き出しが行われた事実だけを記録する場合がありますが、プロジェクトの値は含みません。

現在のタブが開いている間、プロジェクトは sessionStorage から最長6時間復元できます。タブを閉じると通常はそれより早く削除されるため、残したい内容はダウンロードまたはコピーしてください。

よくある質問

描画方式が異なるためです。PNGは距離に応じてピクセルを混ぜ、SVGとCSSは放射状グラデーションを重ねます。色と位置は同じでも、ピクセルは完全には一致しません。

はい。ドラッグ、位置欄への入力、またはフォーカスして矢印キーで移動できます。Shiftを押すと移動幅が大きくなります。

色は6桁のHEX値で保存されます。カラーピッカーを使うか、RGBやHSLを先にHEXへ変換してください。

いいえ。コピーされるCSSは、標準の放射状グラデーションを重ねて効果を近似します。

現在のタブではsessionStorageから最長6時間復元できます。タブを閉じると通常はそれより早く削除されます。当社のサーバーへ送信されたり、ファネルURLへ追加されたりすることはありません。

関連ツール

ASCII表リファレンス

0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。

HTML文字参照

HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。

JavaScript圧縮ツール

変数名のリネーム、空白の削除、デッドコードの除去、定数畳み込みでJavaScriptを圧縮し、より小さなバンドルを作成します。

キーボードショートカット一覧

macOS、Windows、Linux向けに、VS Code、Chrome、GNU Readlineを使うBashの公式資料に基づく既定ショートカットを検索できます。

FPS カウンター

requestAnimationFrame でブラウザーの FPS を測定。平滑化、最小・最大フレームレート、警告しきい値、任意のグラフに対応。ローカルで動作し、アップロードも API も不要です。

プレースホルダー画像ジェネレーター

1〜4000 pxの画像に色と文字を設定し、PNGで保存できます。外部URLとHTMLもコピーできます。

このツールは他の言語でも利用できます