ツールを実行
CSSグラデーションジェネレーターは、2つのカラー値と角度や種別を指定して、スタイルシート用のグラデーションコードを作成できるオンラインツールです。開始色（初期値は#ff6b6b）と終了色（初期値は#4ecdc4）を設定し、線形グラデーションまたは円形グラデーションを選択できます。線形グラデーションでは、角度を度数単位で指定でき、入力された角度は自動的に360度基準の数値に換算されます。角度の指定を省略した場合は45度が適用されます。生成されたCSSコードはそのままコピーして、ウェブサイトの背景やUIコンポーネントの装飾として活用できます。入力欄にカラーコードを入力するだけで直感的に指定可能です。
使い方
- 第1のカラー（開始色）をカラーピッカーまたはHEXコードで指定します（省略時は#ff6b6b）。
- 第2のカラー（終了色）のカラーコードを入力します（省略時は#4ecdc4）。
- グラデーション種別として線形または円形を指定します。
- 線形グラデーションを使用する場合は、グラデーションの角度を度数で入力します（省略時は45度）。
- 実行後に出力欄に表示されたCSSグラデーションコードを確認し、コピーして利用します。
使用例
- 開始色に「#ff6b6b」、終了色に「#4ecdc4」を指定し、角度を「90」、種別を「線形」に設定すると、水平方向の線形グラデーションコード「linear-gradient(90deg, #ff6b6b, #4ecdc4)」が生成されます。
- 開始色に「#00c6ff」、終了色に「#0072ff」を指定し、種別に「円形」を設定すると、中央から広がる円形グラデーションコード「radial-gradient(circle, #00c6ff, #0072ff)」が生成されます。
よくある質問
角度に360度以上の数値を入力した場合はどうなりますか？
入力された角度は360で割った余りとして正規化されて計算されます。例えば405を入力した場合は45度として処理されます。
グラデーション種別に線形や円形以外の値を入力した場合はどうなりますか？
指定された種別が円形以外の場合は、自動的に線形グラデーションの形式でCSSコードが生成されます。
カラー値に無効な文字列を入力した場合はどうなりますか？
入力された文字列は検証を行わずにそのままCSSコード内に組み込まれます。意図通りの表示を得るために、有効なHEXコードやRGB表記を入力してください。