CSS Gradient Generator

概要

• 色と位置（%）を複数指定して、CSSのlinear-gradient・radial-gradientを組み立てるツールです。

• プレビューを見ながら色・位置・角度を調整できるため、実際の見た目を確認しながらグラデーションを作成できます。

• 「色を追加」で3色以上のグラデーションも作成でき、生成されたCSSをそのままbackground-imageなどに貼り付けて利用できます。

使い方

1. 1

   「種類」で線形（Linear）または円形（Radial）を選びます。

2. 2

   各色の入力欄に色（HEXなど）と位置（0〜100%）を入力します。「色を追加」で色を増やせます。

3. 3

   「CSSを生成する」ボタンをクリックすると、プレビューと生成されたCSSが表示されます。

入力例・出力例

linear / 90deg / #FF5733(0%), #3357FF(100%)

linear-gradient(90deg, #FF5733 0%, #3357FF 100%)

利用シーン

• ボタンや背景に使うグラデーションを、実際のプレビューを見ながら色・角度を調整して作成する

• デザインカンプで指定されたグラデーションを、CSSのlinear-gradient構文に変換する

• 複数色を使った円形（Radial）グラデーションを、位置を調整しながら組み立てる

よくある質問

注意点

• 角度（deg）はLinear（線形）を選んだ場合のみ使用され、Radial（円形）では無視されます。

• 色の指定欄にはHEXだけでなく、red・rgb(255,0,0)などのCSSカラー表記もそのまま利用できます（HEX形式のみ妥当性を検証します）。

• 生成結果はページ上にのみ保持されます。再読み込みすると失われるため、必要な場合はコピーして保存してください。