01
角度の意味を先に確認
線形グラデーションは0度で上、90度で右へ向かいます。円錐は独立した開始角を使い、円形には角度がなく中心と円・楕円の形を設定します。
HTML・CSSツール
CSSグラデーションジェネレーター色と形をその場で確認
色の停止位置と形を調整すると、プレビューとコピー用CSSが同時に更新されます。
CSSグラデーションジェネレーター
色の停止点
停止点1
停止点2
CSS宣言
background-image: linear-gradient(90deg, #6366F1 0%, #EC4899 100%);色とCSSはこのブラウザーのタブ内だけで処理され、送信されません。
グラデーション設定
CSSをコピーできます。
色を3色以上使う背景は、コードだけでは中間色や境界を想像しにくいものです。CSSグラデーションジェネレーターなら停止位置を動かしながら、柔らかい遷移とくっきりした境界を見比べられます。
ヒーロー領域やボタン、円形の装飾を作る際にも、このツールは同じ色の組を保ったまま線形・円形・円錐を切り替えられます。
CSSグラデーションジェネレーターを使う理由
色を変えずに形だけ比較し、停止位置まで確かめられます。
同じ配色で3種類を比較
このツールでは線形、円形、円錐へ切り替えても色と位置が残ります。角度と中心の設定は必要な種類だけに表示されます。
古いCSSを誤ってコピーしない
停止位置を動かすとプレビューと宣言が更新されます。無効なHEXを入力した場合は結果が古いものとして薄く表示され、コピーが無効になります。
見落としやすい3つの操作
02
停止点を重ねて境界を作る
ハンドルのドラッグか数値入力で位置を指定します。同じ位置に2色を置くと滑らかな遷移がなくなり、くっきりした帯になります。
03
更新済みの結果だけをコピー
自動生成は初期状態でオンです。オフにした場合は編集後にCtrl/Cmd+Enterで生成できます。変更中は古いCSSをコピーできません。
形・色の位置・コードをまとめて調整
線形・円形・円錐に対応
方向に沿う背景、中心から広がる光、円周を回る色を同じ停止点で試せます。
2〜8個の停止点
各色の6桁HEX、不透明度、位置を編集でき、帯のハンドルを直接動かすこともできます。
標準のCSS宣言
プレビューと一致するbackground-imageをコピーできます。半透明の色はrgba()で出力します。
入力と出力の範囲
- 停止点は2〜8個
- 最後の2点は削除できません。削除する場合は変更後の見た目を確認してから適用し、1回だけ元に戻せます。
- 色は6桁HEXで入力
- #RRGGBBと不透明度を別々に指定します。無効な色や範囲外の数値がある間はコピーできず、色形式の変換は行いません。
- 単一レイヤーのみ
- CSSグラデーション作成後は標準のbackground-imageを1行出力します。画像や既存CSSの読み込み、複数レイヤー、PNGやTailwindへの書き出しには対応しません。
- 文字の可読性は別途確認
- 背景の場所によって明るさが変わるため、文字を載せる場合は実際の位置でコントラストを確認してください。
CSSグラデーションジェネレーターのよくある質問
CSSグラデーションの角度はどう指定しますか？
線形では0〜360度を入力します。0度は上、90度は右です。円錐には別の開始角があり、円形では中心を設定します。
線形と円形グラデーションの違いは何ですか？
線形は指定方向に、円形は中心から外側に色が変わります。CSSグラデーションジェネレーターでは同じ配色のまま切り替えて比較できます。
グラデーションの色を3色以上にできますか？
はい。停止点を追加すると一番広い間隔の中間に新しい色が入り、最大8色まで調整できます。
色の位置を変えるには？
色帯の丸いハンドルを動かすか、位置の欄に0〜100の数値を入力します。同じ位置に2色を置けば硬い境界になります。
生成したCSSは背景にどう使いますか？
コピーしたbackground-image宣言を対象のCSSルールへ貼り付けます。画像ファイルを用意する必要はありません。
想定外の表示がありますか？