グラデーションジェネレーター｜linear・radial・conic の多色 CSS グラデーション（無料）
カラーストップ
最低 2 色必要です。
CSS 出力
background: linear-gradient(90deg, #7C3AED 0%, #3B82F6 100%);関連する外部ツール
一部のリンクはアフィリエイトリンクを含みます。
関連ツール
linear（線形）・radial（放射）・conic（円錐）の 3 種類に対応した無料 CSS グラデーション作成ツールです。カラーストップを好きなだけ追加し、各色をカラーピッカーまたは HEX 入力で選び、位置をスライダーで細かく調整できます。角度（linear）・形状とサイズと中心（radial）・開始角度と中心（conic）も変更でき、大きなライブプレビューでリアルタイムに確認しながら作れます。できあがったら `background` の CSS（または Tailwind 用の値）をワンクリックでコピー。インストール・登録不要、すべてブラウザ内で計算され、色データは送信されません。
使い方
- 種類（linear・radial・conic）を選びます。
- カラーストップを編集します。カラーピッカーをクリックするか HEX を直接入力し、位置スライダー（0〜100%）で位置を決めます。
- 「ストップを追加」ボタン（＋）で色を増やせます（最大 10 個）。×ボタンで削除（最低 2 個は残ります）。
- 種類ごとの設定を調整します。linear は角度、radial は形状・サイズ・中心、conic は開始角度・中心。
- プリセットから始めたり、ランダムボタンでグラデーションを探したりできます。
- できあがったら CSS 出力エリアの「CSS をコピー」をクリックしてそのままプロジェクトに貼り付けます。
グラデーションの種類
CSS には 3 種類のグラデーション関数があります。それぞれ異なる見た目を作れます。用途に合った種類を選んでください。
線形グラデーション（linear-gradient）
指定した方向（角度）に沿って色が変化します。角度 90deg で左→右、180deg で上→下になります（CSS の仕様に従います）。ヒーロー背景・ボタン・カードの装飾など最も汎用性が高い種類です。
放射グラデーション（radial-gradient）
中心点から外側へ放射状に色が広がります。形状（circle・ellipse）・サイズキーワード・中心位置を指定できます。スポットライトやグロー（光の輝き）表現に向いています。
円錐グラデーション（conic-gradient）
中心の周りを回るように色が変化します。開始角度と中心位置を指定できます。カラーホイール・円グラフ風・ねじれた表現に向いています。比較的新しい CSS 機能のため、ごく古いブラウザでは表示されない場合があります。
機能
カラーストップの追加・削除・位置調整
＋ボタンでストップを追加（最大 10 個）、×ボタンで削除（最低 2 個維持）。各ストップの位置スライダーを 0〜100% で細かく設定できます。同じ位置に 2 色を置くとくっきりした境界（ハードストップ）になります。
角度・形状・中心位置の編集
linear は角度スライダー（0〜360deg）で向きを調整。radial は形状（circle/ellipse）・サイズキーワード・中心位置（X/Y）を選択。conic は開始角度と中心位置を設定できます。種類に応じた項目だけが表示されます。
カラーピッカーと HEX 入力（半透明も）
各ストップにカラーピッカーと HEX テキスト入力があります。不透明度（アルファ）スライダーを下げると自動的に rgba() 形式で出力されます（または HEX8 モードを選択可）。不正な HEX を入力してもインラインエラーが出るだけで他のストップとプレビューは壊れません。
大きなライブプレビュー
ページ上部の大きなプレビューエリアに現在のグラデーションが即時反映されます。編集した内容がそのままプレビューに反映されるため、完成イメージを確かめながら作れます。
CSS コードを即コピー（Tailwind 値も）
出力形式を選んで「CSS をコピー」をクリックするだけ。`background: linear-gradient(...);` の 1 行、`background-image:` の値のみ、Tailwind の `bg-[...]` 任意形式から選べます。数値・HEX はロケール整形しない CSS 互換の形式で出力されます。
プリセットとランダム生成
見栄えの良いプリセットをクリックするだけで即時適用できます。ランダムボタンでさまざまなグラデーションを探せます。いずれも編集の出発点として使えます。
活用例
ヒーロー背景・ボタン・カードのグラデーション
2〜3 色の linear グラデーションをヒーロー背景や CTA ボタンに設定し、`background` CSS をコピーしてそのまま CSS に貼り付けるのが最も手軽な使い方です。radial グラデーションはカードの背後に柔らかいグローを演出するのにも使えます。
そのまま CSS / Tailwind に貼る
「background:」出力を選んで CSS ルールにそのまま貼り付けるだけでスタイルが反映されます。Tailwind を使っている場合は「Tailwind」タブに切り替えて `bg-[linear-gradient(...)]` クラスをコピーし、HTML の class 属性に追加するだけで動作します。
円錐グラデーションでカラーホイール風
conic グラデーションで複数の色を等間隔に配置すると、カラーホイールや円グラフ風の背景が作れます。例えば 0%・17%・33%・50%・67%・83% に 6 色を配置すると円を等分したデザインになります。
知っておくと便利なこと・注意点
- 角度の向き: 0deg は上向き、90deg は左→右、180deg は上→下というように CSS 仕様に従います。直感とずれる場合はライブプレビューで確認するのが早いです。
- ブラウザ対応: linear-gradient と radial-gradient はほぼすべてのモダンブラウザで対応済みです。conic-gradient は比較的新しく、ごく古いブラウザでは表示されない場合があります。実際の利用環境で確認してください。
- 位置を省略すると等分: ストップの位置を指定しない場合、ブラウザが前後のストップの間に自動で等間隔配置します。
- 半透明グラデーション: アルファを下げると rgba() で出力されます。背景画像や背景色の上に重ねてオーバーレイ効果を演出できます。
- 色データは送信されません: すべてブラウザ内で計算されます。生成した CSS はそのまま自分のコードに使えます。
よくある質問
- linear だけでなく radial・conic も作れますか？
- はい。上部のタイプ選択で線形（linear）・放射（radial）・円錐（conic）の 3 種類を切り替えられます。各種類に応じた設定項目（角度・形状/サイズ/中心・開始角度/中心）が表示されます。
- 3 色以上・複数のカラーストップを使えますか？
- はい。「ストップを追加」ボタン（＋）で色を増やせます（最大 10 個）。各ストップの位置（0〜100%）をスライダーで調整できます。×ボタンで削除でき、最低 2 色は常に保たれます。
- 角度や中心位置は変えられますか？
- はい。linear は角度スライダー（0〜360deg）で向きを変えられます。radial と conic は X/Y スライダーで中心位置を動かせます。radial は形状（circle/ellipse）とサイズも選べます。
- 出来た CSS をそのままコピーできますか？
- はい。「CSS をコピー」ボタンを押すと `background: ...;` の 1 行がクリップボードにコピーされます。`background-image:` の値のみ、Tailwind 用の値（`bg-[...]`）も選べます。
- Tailwind で使えますか？
- はい。出力形式を「Tailwind」に切り替えると `bg-[linear-gradient(...)]` 形式（スペースを _ に置換した任意形式）でコピーできます。HTML の class 属性にそのまま使えます。
- 半透明（rgba）のグラデーションは作れますか？
- はい。各ストップの不透明度（アルファ）スライダーを下げると、そのストップが `rgba()` 形式で出力されます。背景や画像の上に重ねる半透明のオーバーレイ表現が可能です。
- 色データはサーバーに送られますか？
- いいえ。グラデーションの生成・色のパース・CSS の組み立てはすべてブラウザ内で完結します。入力した色や生成した CSS がサーバーに送信・保存されることはありません。