ツールを実行
CSSグラデーションジェネレーターは、線形（linear）および円形（radial）スタイルのCSSグラデーションコードをすばやく作成できるツールです。グラデーションの種類、進行方向や角度、カンマ区切りのカラー値を入力するだけで、Webデザインに利用可能なCSS記述を出力します。種類の項目にlinearを指定すると指定した方向を含むlinear-gradientが生成され、それ以外の文字列を指定するとcircleを指定したradial-gradientのコードが組み立てられます。複数のカラーコードはカンマで区切って入力でき、前後の余白は自動で調整されます。カラー値や方向の構文検証は行われないため、CSSの仕様に沿った有効な値をご指定ください。
使い方
- 「グラデーションの種類」項目に「linear」またはその他の種別を入力します（未入力の場合はlinearが適用されます）。
- 「方向・角度」項目に「to right」や「45deg」など希望するグラデーションの向きを入力します（linear指定時のみ反映されます）。
- 「カラーリスト」項目にカンマ区切りで複数のカラーコードや色名（例: #ff7e5f, #feb47b）を入力します。
- 実行すると、入力内容に応じたCSSグラデーションのコードが結果欄に表示されます。
- 出力されたCSSコードをコピーして、スタイルシートの背景指定などに適用します。
使用例
- 線形グラデーション（青から濃紺へ右向き）：グラデーションの種類に「linear」、方向に「to right」、カラーリストに「#00c6ff, #0072ff」を指定すると、「linear-gradient(to right, #00c6ff, #0072ff)」が生成されます。
- 円形グラデーション（3色構成）：グラデーションの種類に「radial」、カラーリストに「#ff9a9e, #fecfef, #a1c4fd」を指定すると、「radial-gradient(circle, #ff9a9e, #fecfef, #a1c4fd)」が生成されます。
よくある質問
3色以上のグラデーションを指定することはできますか？
はい、カラーリスト欄にカンマ区切りで色を追加することで、3色以上のグラデーションコードを作成できます。各色の前後の余白は自動で整形されます。
グラデーションの種類をradialに指定した場合、方向の指定は反映されますか？
いいえ、グラデーションの種類がlinear以外の場合は、方向の入力内容に関わらず円形（circle）を指定したradial-gradientコードが出力されます。
無効なカラーコードを入力した場合はどうなりますか？
このツールでは入力文字列に対する構文検証は行われないため、入力されたテキストがそのままCSSコードに組み込まれます。CSSで解釈可能な正しい表記をご入力ください。