こんな方におすすめ
- カードやバナーを作るデザイナー
- CSSグラデーションを学ぶ開発者
Developer Design Utility
CSS Gradient ジェネレーター
色、方向、タイプ、カラー停止位置を調整して、linear-gradient、radial-gradient、conic-gradient の CSS background コードを生成し、リアルタイムプレビューで確認できます。
Gradient コード生成
linear、radial、conic グラデーションの CSS background コードをすぐに生成します。
ライブプレビュー
色、角度、位置を変更するとプレビュー背景に即座に反映されます。
コピー・ダウンロード
セレクターコード、CSS変数、background プロパティをコピーしたり CSS ファイルとして保存できます。
Gradient Type
Linear
Angle
135°
Color Stops
0% / 100%
Output
background
STEP 1
Gradient 設定
グラデーションタイプ、色、角度、適用先セレクターを組み合わせて、目的に合う CSS 背景コードを作成できます。
Linear、Radial、Conic グラデーションを選択します。
0°
135°
360°
Linear / Conic タイプの方向と回転基準として使用されます。
開始色です。HEX カラーコードを入力できます。
終了色です。コントラストが必要な UI では明度差を確認してください。
0%
0%
100%
0%
100%
100%
生成結果に使用する CSS セレクターを選択します。
カスタム選択時のみ使用します。
CSS変数コード生成時に使用する変数名です。
:root 変数とセレクター適用コードを一緒に出力します。
Live Preview
CSS Gradient
色と方向を調整してリアルタイム背景プレビューを確認してください。
Type
linear
Angle
135°
Colors
2
STEP 2
おすすめプリセット
ボタン、カード、ヒーロー背景、サムネイルでよく使われるグラデーションです。
基本 UI グラデーション
強調 / CTA グラデーション
特殊タイプグラデーション
STEP 3
待機中
生成結果
以下のコードを CSS ファイルまたは style 属性で使用できます。
設定を選択して CSS コード生成ボタンを押してください。
2色のグラデーションを作り、CSSを再利用する
線形、放射状、円錐形のグラデーションを2つの色停止点でプレビューします。角度や停止位置を調整し、background-imageのコードをコピーまたはCSSファイルで保存できます。
活用場面
- 斜めに変化する2色の背景を作る。
- CSS変数を使って背景を共通化する。
入力から結果の確認まで
- 1
linear、radial、conicから選びます。
- 2
2色のHEXと停止位置のパーセントを指定します。
- 3
linearとconicでは角度を指定します。radialは中央の円に固定です。
- 4
選択子と必要ならCSS変数を指定し、生成します。
- 5
生成後の有効な変更はコードに反映されます。エラーを直してからコピー・保存します。
青から紫へ変わる斜めの背景
- 入力
- linear・135° #2563eb：0%・#7c3aed：100%
- 結果
- background-image: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
大きさのある要素に宣言を適用して確認します。
白い中央と黒い外周
- 入力
- radial #ffffff：0%・#000000：75%
- 結果
- background-image: radial-gradient(circle, #ffffff 0%, #000000 75%);
75%以降も2番目の色が続きます。この放射状出力では角度は使いません。
計算・処理の仕組み
2色と停止位置をgradient関数に組み合わせ、background-imageを直接、または:rootのカスタムプロパティ経由で出力します。最初の停止位置は2番目以下にします。同じ位置なら境界が急に切り替わります。
注意点と制限
- 停止点は2つです。繰り返し、透明度、補間色空間の選択には対応しません。
- radialの形と中心は固定で、conicも既定の中心を使います。
- 選択子は出力用で、このページの任意の要素には適用されません。
- 背景の各位置での文字コントラストは自動検査しません。
データの取り扱い
色、選択子、変数名はブラウザー内で処理します。コピー・保存したCSSには設定値が含まれます。
参考資料
あわせて使えるツール
よくある質問
radialで角度が変わらないのはなぜですか？
中央の円を使うradial-gradient(circle, ...)を出力するためです。角度はlinearとconicに適用されます。
停止位置を逆順にできますか？
最初の位置が2番目を超えると修正を求めます。色の順を逆にして変化の向きを変えてください。
エラー表示は保存できますか？
有効な生成済みCSSだけを保存できます。入力を修正するか、サンプル読み込み後に生成してください。