Web制作・デザイン支援 無料ツール
CSSグラデーションジェネレーター
色、位置、角度を設定して、CSSグラデーションのコードをその場で作成できます。登録不要で、入力値と生成結果はすべてブラウザ内で処理します。
CSSグラデーションを作成する
リアルタイムプレビュー
プレビュー
設定が有効なとき、背景へすぐ反映されます。
CSSコード
background宣言をコピーできます。
プリセット
この無料ツールでできること
- linear、radial、conicの3種類のCSSグラデーションを作成できます。
- 2〜5個のカラーストップと、各色の位置を設定できます。
- 角度、形状、中心位置をプレビューしながら調整できます。
- 生成したbackground宣言をワンクリックでコピーできます。
CSSグラデーションの作り方
- グラデーションの種類を選びます。
- カラーピッカーまたはHEX入力で色と位置を設定します。
- 必要に応じて角度、形状、中心位置を調整します。
- プレビューを確認し、CSSコードをコピーしてスタイルシートへ貼り付けます。
linear-gradientとは
linear-gradientは、指定した角度に沿って色が変化する基本的なグラデーションです。背景、ボタン、バナーなど幅広いUIに使えます。角度は0〜360度で調整できます。
radial-gradientとは
radial-gradientは中心から外側へ色が広がる形式です。円形・楕円形と中心位置を選べるため、光の広がりや視線を集める背景の表現に向いています。
conic-gradientとは
conic-gradientは中心を基準に扇形に色が変化する形式です。開始角度と中心位置を調整でき、円グラフ風の装飾やアクセントに使えます。
具体例：背景にグラデーションを使う
生成されたbackground宣言を、対象要素のCSSルールへ貼り付けます。文字を重ねる場合は、関連ツールのカラーコード・コントラストチェッカーで読みやすさも確認してください。
仕様と注意点
この初版は不透明なHEXカラーによる単一レイヤーの背景生成を対象とします。画像書き出し、アニメーション、複数レイヤー、ログイン、サーバー保存には対応していません。ブラウザや利用環境によって対応状況が異なるため、公開前に対象ブラウザで表示を確認してください。
よくある質問
入力した色や生成CSSは送信されますか？
いいえ。ツールの入力、検証、生成、コピーはブラウザ内で処理し、ツール機能として外部APIへ送信・保存しません。
カラーストップは何個まで追加できますか？
初版では2〜5個です。削除しても2個未満にはなりません。
同じ位置に色を置けますか？
このツールでは意図しない急な変化を避けるため、同じ位置はエラーとして表示します。位置を分けて設定してください。
生成したCSSはそのまま使えますか？
基本のbackground宣言として利用できます。既存のbackground指定や対象ブラウザとの互換性は、制作中の環境に合わせて確認してください。
プライバシー
グラデーションの設定と生成CSSはブラウザ内だけで処理します。詳しくはプライバシーポリシーをご確認ください。