SVGグラデーション生成

複数ストップの線形/放射状SVGグラデーションを数秒で書き出し。

作業エリア

°
px
px
ヒント:ダウンロードしたSVGコードを編集すれば、いつでも幅・高さを変更できます。
%
%
プリセット(クリックで適用):

結果

Other tools you may like

Webやデザイン向けにSVGグラデーションを作成。複数のカラーストップ、角度、サイズで線形・放射状のグラデーションが作れます。

処理はすべてブラウザ内で行われ、ファイルはアップロードされません。

手順の解説はチュートリアルをどうぞ: SVGグラデーション背景の作り方

使い方

  • 線形または放射状グラデーションを選びます。
  • 線形では角度で方向を調整します。
  • カラーストップを追加・削除します。
  • 各ストップの位置(%)を調整します。
  • 出力の幅と高さを設定します。
  • 生成したSVGファイルをダウンロードします。

注意:

  • SVGはベクター形式のため拡大縮小しても劣化しません。
  • ダウンロードしたSVGはWebページやデザインツールで利用できます。
  • カラーストップは最低2つ必要です。
  • 最大出力サイズは 5000px × 5000px です。