CSSグラデーションジェネレーター

CSSグラデーションジェネレーターは，CSSのlinear-gradient()とradial-gradient()を画面上で組み立てるツールです．初期状態は線形，角度135度で，#f857a6 0%と#ff5858 100%の2つのカラーストップを持ちます．「線形」と「円形」のボタンで種類を切り替えても，現在のストップの色と位置は維持されます．

線形を選ぶと，角度を0〜360度の範囲で1度ずつ変更できます．CSSの角度は0度が下から上，90度が左から右，180度が上から下，270度が右から左で，正の値は時計回りです．0度と360度は同じ方向ですが，画面上では両端の値をそのまま選べます．出力には方向キーワードではなく，選択した数値とdegを常に含めます．

放射状を選ぶと，角度の代わりに円の中心位置を選びます．選択肢は中央，上辺中央，下辺中央，左辺中央，右辺中央，左上，右上，左下，右下の9件です．たとえば「左上端」はcircle at top leftになります．at topは円の上半分だけを描く指定ではなく，グラデーションの中心を要素の上辺中央へ置く指定です．

放射状の形状はcircleに固定されています．ellipse，closest-sideやfarthest-corner等のサイズキーワード，pxや%による任意中心座標は設定しません．conic-gradient()，repeating-linear-gradient()，repeating-radial-gradient()，複数グラデーションの重ね合わせも生成対象外です．

各カラーストップは，色，0〜100%の位置，画面内で選択を区別するIDを持ちます．最低2件は残り，最大8件まで追加できます．位置スライダーは1%刻みで，選択したストップだけを移動します．CSS一般では0%未満や100%超の位置も書けますが，このツールの操作範囲は0〜100%に限定しています．

色はブラウザのカラーピッカーかテキスト欄から変更します．テキスト欄で有効なのは「#」に続く6桁のHEX値です．3桁・4桁・8桁HEX，rgb()，hsl()，名前色，alpha付きの色は受け付けません．入力途中の文字列と現在有効な色を分けて保持するため，不完全な値を入力してもプレビューとコードには直前の有効色が残り，欄の下に入力条件を表示します．

#RRGGBBの形になったときだけ小文字化して反映します．

同じ位置に複数の色を置くこともできます．同位置の色は滑らかな移行ではなく，硬い境界を作る用途に使えます．ツールはストップを画面へ追加した順のまま出力せず，位置の小さいものから大きいものへ並べ替えてCSS文字列を作ります．同じ位置の複数項については，現在の配列内の順序が残ります．

「分岐点を追加」を押すと，既存位置を昇順に並べ，隣接する位置同士で最も広い区間を探します．0%と100%の2件なら中点の50%，0・50・100%なら最初に見つかる最大区間の中点である25%が候補です．丸めた整数位置が使用済みなら，そこから1%ずつ近い空き位置を探します．新しい色は#ffffffです．3件以上あるときは選択中のストップを削除でき，2件未満にはしません．

グラデーションギャラリーには6件の固定プリセットがあります．線形は，#f857a6から#ff5858へ変わる「サンセット・グロウ」45度，#00c6ffから#0072ffの「ディープ・ネオン」135度，#a8ff78から#78ffd6の「オーロラ」90度，#7f00ffから#e100ffの「ラベンダー・マジック」45度，#ff9966から#ff5e62の「コーラル・ブリーズ」135度の5件です．

放射状は「ミッドナイト・ブルー」の1件です．中心を中央とし，#0f2027 0%，#203a43 50%，#2c5364 100%の3ストップを読み込みます．プリセット名は区別のためのラベルで，配色品質，用途への適合，ブランドとの調和を評価した結果ではありません．

プリセットを選ぶと，現在の種類，角度，中心位置，全カラーストップを置き換えます．既存の設定へ色だけを足す動作ではありません．線形プリセットでも放射状の中心位置は中央へ戻し，後から放射状へ切り替えた際に古い中心指定が残らないようにします．読込前の状態を保存する履歴やundo・redoはないため，必要なコードは先にコピーします．

読込時には各ストップの内部IDを作り直し，新しい先頭ストップを選択状態にします．これにより，色入力欄，位置スライダー，一覧の強調が同じストップを指します．読込後は通常の編集と同じく，色・位置の変更，ストップ追加，3件以上なら削除が可能です．プリセットをファイルへ保存したり，独自プリセットを登録したりする機能はありません．

出力前に，各ストップを位置の昇順へ並べ，「色 位置%」の形にしてカンマで連結します．線形ならlinear-gradient(135deg, #f857a6 0%, #ff5858 100%)のように，放射状ならradial-gradient(circle at center, #0f2027 0%, #203a43 50%, #2c5364 100%)のように組み立てます．

ツールは構文解析器で任意のCSSを読み戻すものではなく，画面で選べる値から一方向に文字列を生成します．

リアルタイムプレビューは，組み立てた同じ文字列を確認領域のbackgroundへ渡し，現在のブラウザに描画させます．Canvas，SVG，画像ファイル，独自レンダリングエンジンによる表示ではありません．画面の値を変更すると文字列とプレビューも更新されますが，描画速度やフレームレートを保証する機能ではありません．

ツールが計算するのはストップの並びとCSS文字列までです．ストップ間の中間色をJavaScriptで生成したり，OKLCH・Lab・Display P3へ変換したり，補間方法を示す「in ...」を加えたりはしません．実際の中間色は，指定した#RRGGBB値とCSSを受け取ったブラウザの処理に従います．特定の色空間で必ず補間される，彩度が維持される，全ブラウザで同じ発色になるとは説明できません．

プレビュー領域と貼り付け先の要素で幅・高さ・縦横比が異なると，特に放射状や斜めの線形グラデーションは見え方が変わります．プレビューはコードの構造と大まかな色の変化を確認するために使い，実際のヘッダー，カード，ボタン等へ適用した結果も別途確認します．

出力は2形式です．「CSS Background」はbackground: linear-gradient(...);またはbackground: radial-gradient(...);という1つのCSS宣言です．「React Inline Style」はstyle={{ background: "linear-gradient(...)" }}というJSX用の断片です．

両方とも中核となるグラデーション文字列は同じで，外側の記法だけが異なります．

CSS宣言はスタイルシートやstyle要素の宣言ブロックへ入れる形式です．React版はstyle propへJavaScriptオブジェクトを渡す形式であり，CSSのコロンとセミコロンをそのままオブジェクト内へ貼るものではありません．完全なHTML要素，Reactコンポーネント，クラス名，CSSファイルを出力するわけではないため，対象要素やセレクターは利用側で用意します．

出力にbackground短縮プロパティを使う点にも注意が必要です．既存要素へ適用すると，先に設定されていたbackground-image，background-color，background-size，background-repeat等の背景関連値が短縮指定の影響を受けます．

他の背景設定を維持したい場合は，貼り付け先の宣言と優先順位を確認し，必要に応じてbackground-imageへ書き換えるなどの調整を行います．

各形式の「コピー」を押すとClipboard APIへ表示中の文字列を書き込みます．成功した場合だけチェックアイコンと「コピー完了」を約2秒表示します．ブラウザの権限や実行条件で失敗した場合は，表示コードを手動で選択してコピーする案内を出します．Tailwind CSSクラス，SCSS・Sass mixin，ベンダープレフィックス，旧ブラウザ用フォールバック，ダウンロードファイルは生成しません．

グラデーションは適用領域の寸法と縦横比によって色の広がり方が変わります．利用するブラウザや表示装置も見え方へ影響し得るため，プレビューと全環境でピクセル単位に一致するとは限りません．主要なlinear-gradient()とradial-gradient()を使うコードですが，利用対象のブラウザ・WebViewと実際の画面サイズで表示を確認してください．

背景の上へ文字を置く場合，コントラストは場所ごとに変わります．両端の2色だけを単色として検査しても，その間の色や文字が重なる領域のコントラストを自動的に保証することはできません．本ツールは文字色，フォントサイズ，文字位置を受け取らず，WCAGの合否判定も行いません．実際に文字の背後となる領域を対象に，通常・hover・focus等の各状態を確認します．

透明色，楕円，放射サイズ，任意中心座標，conic・repeating，複数レイヤー，色空間・補間方法の指定，グラデーションアニメーション，hover状態の組合せは非対応です．ストップをトラック上でドラッグしたり，数値を直接入力したりもせず，丸印で対象を選び，位置スライダーで変更します．履歴，自動保存，共有URL，画像・CSSファイルの書出しもありません．

プリセットと生成コードは，見た目の良さ，ブランドガイドラインへの適合，可読性，ブラウザ互換性を判定しません．生成結果を公開へ使う前に，貼り付け先の背景設定，表示領域，テキストとのコントラスト，対応ブラウザを確認します．素材やデザインの権利，プロジェクトの利用条件についても，ツールが可否を一律に判断するものではありません．