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へ追加されたりすることはありません。

関連ツール

BinaryからHexへのコンバーター

バイナリ入力を大文字の16進数値に変換します。0と1以外は無視され、先頭の0は保持されません。

バイナリからASCIIへの変換ツール

バイナリ（スペース区切りのバイト、または長いビット列）を貼り付けると、それが表すASCIIテキストを8ビットずつ復号して取得できます。

FPS カウンター

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

カラーパレットジェネレーター

基準のHEXカラーから、モノクロマティック、類似色、補色、トライアド、テトラードのパレットを生成し、コピーしやすいCSS変数として書き出します。

ランダムカラーパレットジェネレーター

2〜15色のランダムなカラーパレットを生成し、ビビッド、パステル、ミュート、ダークからスタイルを選んで、HEXコードやCSS変数をコピーできます。

2進数から10進数へ変換

2進数を10進数に、または10進数を2進数に、瞬時に変換します。数字を1つ貼り付けて結果を読み取るだけです。