CSSグラデーションジェネレーター：リニア＆ラジアル

Gradient Generator とは？

Gradient Generatorはブラウザベースのビジュアルエディターで、CSSグラデーション（リニア、ラジアル、コニック）を複数のカラーストップと調整可能なパラメーターで作成できます。プロダクションに即使えるCSSを出力し、どのスタイルシートにもコピーして貼り付けられます。ツールは変更するたびにリアルタイムでグラデーションのプレビューを表示するため、エディターとブラウザのデベロッパーツールを行き来して試行錯誤する必要がありません。デザイナーはグラデーション背景のプロトタイプ作成と正確なCSS生成に使用し、デベロッパーはスケーラブルなアセット向けにSVGグラデーションファイルをエクスポートするために使用します。

主な機能

• リニア・ラジアル・コニックグラデーション — ワンクリックで3種類のグラデーションタイプを切り替え。各タイプは正しいCSS関数を出力します：linear-gradient()、radial-gradient()、conic-gradient()。
• 位置付きの複数カラーストップ — ストップをいくつでも追加可能。各ストップにはカラーピッカー、hex入力、0%〜100%のポジションスライダーがあります。最小は2ストップで、最後の2つを削除しようとするとエラートーストが表示されます。
• グラデーション角度の調整 — リニアとコニックタイプに対して0°〜360°のスライダーで角度を調整。角度はCSSに直接埋め込まれます。
• リアルタイムCSS生成 — CSS出力カードは変更のたびに即座に更新されます。出力形式は background: linear-gradient(90deg, #8E2DE2 0%, #4A00E0 100%);。
• グラデーションの即時プレビュー — ツール上部にある高さ256pxのプレビューパネルが、ライブCSSをインラインスタイルとして使用してグラデーションをレンダリングします。
• ワンクリックでCSSをコピー — CSSコピーボタンで完全な background: ...; 宣言をクリップボードにコピーし、履歴にも記録します。
• リピートグラデーションのサポート — 現在は別コントロールとして表示されていませんが、CSS出力を手動で編集して linear-gradient を repeating-linear-gradient に変更できます。
• ブラウザ互換のCSS出力 — 生成されるCSSはすべてのモダンブラウザでサポートされている標準のプレフィックスなし構文を使用します。

Gradient Generatorの使い方

ステップ1：グラデーションタイプを選択する

近日公開: Gradient Generatorを開きます。ツールはデフォルトのリニアグラデーション（#8E2DE2（バイオレット）0%から#33FFDD（明るいティール）100%、90度）で開きます。

グラデーションタイプカードで3つのボタン（リニア、ラジアル、コニック）のいずれかをクリックします。プレビューが即座に更新されます。リニアとコニックタイプでは、タイプセレクターの下に角度スライダーが表示されます。

ステップ2：角度を設定する（リニアとコニックのみ）

角度スライダーを0〜360度の間でドラッグします。現在の角度値がラベルとして表示されます（例：角度：135°）。0°は上から下、90°は左から右、180°は下から上、270°は右から左の方向です。スライダーを動かすたびにプレビューが更新されます。

ラジアルグラデーションでは、radial-gradient(circle, ...) は角度パラメーターを使用しないため、角度コントロールは非表示になります。

ステップ3：カラーストップを設定する

カラーストップカードには各ストップが行として表示され、以下が含まれます：

• ネイティブのカラー入力（色付き正方形）— クリックしてブラウザのカラーピッカーを開く
• 現在のカラー値を表示するhexテキスト入力
• 0〜100%のポジションスライダー
• ポジション％ラベル（例：45%）
• 削除ボタン（ゴミ箱アイコン）

カラー入力とhex入力はどちらも同じストップを更新します。どちらかを変更すると、プレビューが即座にリフレッシュされます。

ストップを追加をクリックして、白のデフォルトカラーでランダムな位置に新しいカラーストップを挿入します。必要な場所に配置するためにカラーと位置を編集します。

ステップ4：カラーストップを削除する

任意のストップ行のゴミ箱アイコンをクリックして削除します。ストップが2つしか残っていない場合、削除をクリックすると「カラーストップは最低2つ必要です」というエラーメッセージがトーストで表示され、両方のストップが保持されます。

ステップ5：CSS出力をコピーする

CSS出力カードに完全な宣言が表示されます：

background: linear-gradient(90deg, #8e2de2 0%, #33ffdd 100%);

CSSをコピーをクリックしてこの文字列をクリップボードにコピーします。成功のトーストがコピーを確認します。エントリは履歴パネル（サポーターアカウント用）にグラデーションタイプ、角度、CSS値とともに記録されます。

ステップ6：SVGとしてエクスポートする（サポーター機能）

SVGボタン（ダウンロードアイコン付き）をクリックして、グラデーションをSVGファイルとしてエクスポートします。リニアグラデーションでは、SVGは gradientTransform="rotate(angle, 0.5, 0.5)" 属性を持つ <linearGradient> 要素を使用します。ラジアルグラデーションでは <radialGradient> を使用します。ファイルは gradient.svg としてダウンロードされます。これはプレミアムサポーター機能です。

ステップ7：ランダム化またはリセット

ランダム化（円形の矢印アイコン）をクリックして、2つのランダムカラーとランダム角度で新しいグラデーションを生成します。クリアをクリックして、グラデーションを90°のデフォルトのバイオレットからティールのリニアグラデーションにリセットします。

実践的な例

ヒーローセクションの背景グラデーション

ランディングページのヒーロー用に #667EEA（ミディアムブルーバイオレット）から #764BA2（ディープパープル）への135°の斜めグラデーションを作りたい場合。タイプをリニアに設定し、角度スライダーを135にドラッグして、ストップ1を0%で #667EEA、ストップ2を100%で #764BA2 に変更します。CSSをコピーして貼り付けます：

.hero {
  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
}

ラジアルスポットライト効果

カードの中心を照らすようなラジアルグラデーションを作りたい場合。タイプをラジアルに設定します。ストップ1を0%で #FFFFFF に変更し、50%に #F1F5F9 の3番目のストップを追加し、ストップ2（現在のストップ3）を100%で #CBD5E1 に設定します。出力：

background: radial-gradient(circle, #FFFFFF 0%, #F1F5F9 50%, #CBD5E1 100%);

白いカードの表面に微妙な奥行き効果として使用できます。

コニックカラーホイールプレビュー

タイプをコニックに、角度を0°に設定します。6つのストップを均等に配置します：赤（#FF0000）0%、黄（#FFFF00）17%、緑（#00FF00）33%、シアン（#00FFFF）50%、青（#0000FF）67%、マゼンタ（#FF00FF）83%。最後のストップは自然に赤に戻ります。SVGとしてエクスポートして、色彩理論の図でホイールを使用できます。

ヒントとベストプラクティス

カラーストップはCSS生成前に位置でソートされます。 ストップはどんな順序でも追加できます — ツールは常に出力を書き込む前に昇順にソートします。スライダーで0%のストップを50%のストップの後ろにドラッグすると、CSSは正しく並び替えられます。

クリエイティブな出発点にランダム化ボタンを使用する。 ランダマイザーは2つのランダムhexカラーとランダム角度を生成します。洗練する価値のあるパレットが見つかるまで繰り返しクリックし、その後手動でカラーを調整します。

既存のグラデーションをリバースエンジニアリングするために貼り付ける。 ツールはまだCSSグラデーション文字列を直接貼り付けることをサポートしていません。ただし、既存のグラデーションからカラーストップ値を抽出して手動で入力できます。

共有可能なURLがすべてのグラデーションパラメーターをエンコードします。 グラデーションタイプ、角度、カラーストップ（コンパクトな color:position 文字列として）がページURLにシリアライズされます。URLをコピーして、チームメンバーと正確なグラデーション設定を共有できます。

SVGエクスポートは400×200pxのキャンバスを使用します。 エクスポートされた gradient.svg は width="400" height="200" で、グラデーションでキャンバス全体を塗りつぶす <rect> 要素があります。SVGは解像度に依存しないため、自由にスケールできます。

最低2ストップはトーストメッセージで強制されます。 2つしか残っていない状態でストップを削除しようとすると、エラートーストは「カラーストップは最低2つ必要です」と表示されます — グラデーションには有効なCSSになるために少なくとも2つのストップが必要です。

よくある問題とトラブルシューティング

CSS出力に background: ;（空のグラデーション）と表示される。 通常の使用では発生しないはずです。カラーストップ配列が何らかの理由で空になった場合（URLステートの破損でのみ可能）、generateCss 関数は空の文字列を返します。リセットボタンでツールをクリアするか、ページをリロードしてデフォルト状態を復元してください。

カラーストップのhex入力が入力後に間違ったカラーを表示する。 hex入力はストップのカラー値に直接紐付けられています。無効なhex（例：#ZZZZZZ）を入力すると、カラーピッカー入力は更新されず、以前の有効なカラーが表示される場合があります。hexを有効な6桁の値に修正してください。

ポジションスライダーを正確に配置するのが難しい。 スライダーは1%刻みで値を受け入れます。正確な配置には、パーセンテージを直接入力してください — ただし、現在のUIはスライダーのみを使用しています。近い丸い数値を使用し、CSS出力で確認してください。

ラジアルグラデーションが中心からずれている。 生成されるラジアルグラデーションはデフォルトで50% 50%に中心を置く radial-gradient(circle, ...) を使用します。circle at X% Y% の追加はUIではまだ利用できません。スタイルシートでコピーしたCSSを手動で編集して中心を移動してください。

SVGエクスポートがリニアまたはラジアルしか表示しない。 SVGエクスポート関数はリニアグラデーションを <linearGradient> として処理し、その他のすべてのタイプ（コニックを含む）を <radialGradient> として処理します。コニックグラデーションにはSVGの同等物がないため、SVGエクスポートではラジアルにフォールバックします。

履歴の復元で状態が部分的にしか復元されない。 履歴復元機能は、保存された履歴エントリのテキストからグラデーションタイプと角度を解析します。履歴からカラーストップを復元しません（カラーストップは共有可能なURLステートに保存されています）。完全な状態復元には共有URLを使用してください。

プライバシーとセキュリティ

Gradient Generatorはすべてブラウザ内で動作します。CSS生成、カラーストップ管理、SVGエクスポートロジックはすべて純粋なJavaScriptです。グラデーション設定、カラー値、使用データのいずれも外部サーバーに送信されません。SVGエクスポートはローカルファイルを書き込むために downloadText を使用します — アップロードは発生しません。ツールはページ読み込み後に完全にオフラインで動作し、プロプライエタリまたは未公開のデザインアセットとの使用でも安全です。

よくある質問

Gradient Generatorは無料ですか？

はい。すべてのコア機能（リニア・ラジアル・コニックグラデーションの作成、複数のカラーストップ、角度調整、CSSコピー、ランダム化）はアカウント不要で無料です。SVGエクスポートボタンはKo-fiサポーターサブスクリプションが必要なプレミアムサポーター機能です。

Gradient Generatorはオフラインで動作しますか？

はい。ページが読み込まれると、グラデーション生成、プレビューレンダリング、CSS出力はすべてインターネット接続なしで動作します。オンラインに依存する機能は最初のページ読み込みと共有URLのみで、共有URLはURL自体にステートをエンコードします（ステートを読み込むためのサーバー呼び出しは不要）。

Gradient Generatorでデータは安全ですか？

はい。グラデーションパラメーターもカラー値もサーバーに送信されません。ツールにはグラデーション生成のためのバックエンドがありません。デザインは完全にデバイス上に保持されます。共有可能なURLはURL文字列自体にステートをエンコードします — サーバーに保存されません。

ツールはどのCSSグラデーションタイプをサポートしていますか？

ツールは3種類のCSSグラデーションタイプをサポートしています：linear-gradient()、radial-gradient()、conic-gradient()。CSS出力は標準のプレフィックスなし構文を使用します。ブラウザサポートについては、linear-gradient と radial-gradient はすべてのモダンブラウザで動作します；conic-gradient はChrome 69+、Safari 12.1+、Firefox 83+が必要です。

複数ストップのグラデーションはどのように作成しますか？

ストップを追加をクリックして追加のカラーストップを挿入します。各新しいストップは白のデフォルトカラーでランダムな位置に表示されます。カラースウォッチをクリックするかhex値を入力してカラーを設定し、ポジションスライダーをドラッグして配置します。ストップ数の上限はありません。

カラーストップを削除できますか？

はい。任意のストップ行のゴミ箱アイコンをクリックします。2つしか残っていない場合、ツールは削除を防ぎ、トーストを表示します：「カラーストップは最低2つ必要です。」有効なCSSグラデーションには少なくとも2つのカラーストップが必要です。

エクスポートされたSVGファイルには何が含まれていますか？

SVGエクスポートは400×200pxのファイルを作成し、<linearGradient>（リニアタイプ用）または <radialGradient>（ラジアルとコニックタイプ用）を含む <defs> ブロックと、そのグラデーションでキャンバス全体を塗りつぶす <rect> 要素が含まれます。ファイルは gradient.svg という名前で自動的にダウンロードされます。

生成されたCSSをTailwind CSSで使用できますか？

はい。linear-gradient(...) の値（background: プレフィックスなし）をTailwindの設定にカスタム背景画像として貼り付けます：

backgroundImage: {
  'brand-gradient': 'linear-gradient(135deg, #667EEA 0%, #764BA2 100%)',
}

HTMLで bg-brand-gradient として使用します。

ツールは透明なカラーストップをサポートしていますか？

カラー入力は不透明なhex値（6桁）のみを受け入れます。透明度のあるグラデーションを作成するには、CSS出力をコピーし、スタイルシートでストップカラーを手動で rgba() 表記に変更してください。例：linear-gradient(90deg, rgba(142, 45, 226, 0) 0%, #4A00E0 100%)。

グラデーションを誰かと共有するには？

グラデーションを設定した後、ブラウザのアドレスバーからURLをコピーします。URLはグラデーションタイプ、角度、すべてのカラーストップ値をエンコードします。そのURLを別のデバイスで開くと、まったく同じグラデーションが読み込まれます。ページ下部の共有ボタンを使って、Twitter、LinkedIn、Reddit への投稿やリンクの直接コピーも可能です。

関連ツール

• 近日公開: UI Gradients — 厳選された名前付きグラデーションのライブラリを閲覧して、CSS値を直接コピー。
• Color Picker — グラデーションストップとして追加する前に、EyeDropperまたは形式入力を使用して正確なhexカラーを検索。
• 近日公開: Color Blender — 2つの値の間にスムーズな中間カラーを生成。マルチストップグラデーションの手動計画に有用。
• 近日公開: Palette Generator — グラデーションストップのソースとして使用するための調和のとれたカラーパレットを生成。

今すぐGradient Generatorを試す：近日公開: Glyph Widgets Gradient Generator