グラデーションの種類
角度
90°カラーストップ
プレビュー
CSS
生成はすべてブラウザ内で行われ、選んだ色や設定はアップロードされません。
Web サイトやバナーの背景・ボタン・見出し文字に使う CSS グラデーションを、色とつまみを操作するだけで作れるコードジェネレーターです。線形（linear-gradient）・円形（radial-gradient）・扇形（conic-gradient）の 3 種類に対応し、色は 2 色だけでなく 3 色以上の多色グラデーションも作れます。各カラーストップは色そのものと位置（%）を自由に指定でき、線形・扇形では角度（0〜360°）をスライダーで調整できます。プレビューはリアルタイムで更新されるので、「思った色味になっているか」を見ながら詰められます。出力は `background: linear-gradient(90deg, #ff0080 0%, #7928ca 100%);` のように `<head>` や CSS ファイルへそのまま貼り付けられる形で、ワンクリックでコピーできます。さらに「文字グラデ」モードに切り替えると、`background-clip: text` を使って文字色をグラデーションにするためのコード一式（`-webkit-background-clip` 込み）も出力するので、グラデーションの見出しテキストもコピペで実装できます。色の指定はカラーピッカーで選ぶだけ、入力した色や設定はすべてブラウザ内だけで処理し、サーバーへアップロード・保存・送信は一切行いません。配色そのものに迷うときは当サイトの配色ツールで決めた色をここに入れると、コードまで一気に仕上がります。
使い方
- グラデーションの種類（線形 / 円形 / 扇形）を選び、必要なら角度スライダーで向きを調整します。
- カラーストップの色と位置（%）を指定します。「色を追加」で 3 色以上の多色グラデーションにもできます。
- 右側に生成された CSS が即時表示されます。「コピー」で CSS にそのまま貼り付け。文字グラデにしたいときは「文字グラデ」を ON にします。
よくある質問
入力した色や設定はアップロードされますか？
いいえ。コード生成とプレビューはすべてあなたのブラウザ内で完結し、選んだ色や角度などの設定はサーバーへアップロード・保存・送信されません。完全にローカルで動作します。
3 色以上の多色グラデーションは作れますか？
はい。「色を追加」ボタンでカラーストップを増やせます。各ストップは色と位置（%）を個別に指定できるので、3 色・4 色…と自由に多色グラデーションを組めます。不要なストップは各行の削除ボタンで消せます。
文字（テキスト）をグラデーションにするコードも作れますか？
はい。「文字グラデ」を ON にすると、`background-clip: text`（互換のための `-webkit-background-clip: text` 込み）と `color: transparent` を使って文字色をグラデーションにするためのコード一式を出力します。見出しやロゴ文字のグラデーションをコピペで実装できます。
linear-gradient と radial-gradient、conic-gradient の違いは？
linear（線形）は指定した角度に沿って直線的に色が変化します。radial（円形）は中心から外側へ放射状に色が変化します。conic（扇形）は中心の周りを回転するように色が変化し、円グラフや色相環のような表現に向きます。種類を切り替えるとプレビューと CSS が即時に変わるので、見比べて選べます。
生成された CSS はそのまま使えますか？
はい。出力は `background: linear-gradient(...);` のように CSS のプロパティとして貼り付けられる形になっています。「コピー」ボタンでコピーし、対象要素の CSS に貼り付けてください。文字グラデの場合は出力された複数行をまとめて貼り付けます。