CSSグラデーション生成

// CSSグラデーション生成に関するよくある質問

対応しているグラデーションの種類は？

**linear-gradient**（線形・直線的な色変化）、**radial-gradient**（放射状・円形の広がり）、**conic-gradient**（円錐状・回転角度の色変化）の3種類に対応しています。ボタン1つで切り替えて、それぞれのプレビューを確認できます。用途に応じて使い分けることで、多様な表現が可能です。

どんな用途にどの種類を使えば良い？

**linear**: ボタン・ヒーロー背景・カード背景など、最も一般的な用途に。**radial**: 光源・スポットライト効果・注目させたい中心がある場合に。**conic**: 円グラフ風・回転する印象を出したい場合・モダンで目を引く装飾に。迷ったら linear が無難で、8割の用途をカバーできます。

色は何個まで追加できますか？

最小2色から最大8色まで自由に追加できます。「+ ADD」ボタンで色を追加、削除ボタンで減らせます。3〜4色でも十分きれいなグラデーションが作れますし、8色まで使えば虹のような複雑な表現も可能です。

カラーストップの位置ってどう調整する？

各色に0〜100%の位置スライダーがあります。例えば「赤 0% → 青 50% → 黄 100%」のように配置すると、色の境界がどこにくるかを制御できます。境界を近づけると（例: 赤 40% → 青 60%）シャープな切り替わりになり、離すとなめらかなグラデーションになります。

生成したCSSはそのまま使えますか？

はい、COPYボタンでクリップボードにコピーして、CSSファイルの `background:` に貼り付けるだけで使えます。`background-image` としても機能するので、既存のスタイルシートにすぐ統合できます。

ブラウザ互換性は大丈夫？

**linear**・**radial**: モダンブラウザ全て（Chrome・Firefox・Safari・Edge）で問題なく動作、IE11 でも動きます。**conic**: 2020年以降のモダンブラウザで対応（Chrome 69+、Safari 12.1+、Firefox 83+）。conic-gradient を古い環境で使う場合は、フォールバック用の linear-gradient を用意すると安全です。

透明色（transparent）は使えますか？

カラーピッカーでの透明選択は限定的ですが、HEXコード入力欄に半透明の色コード（例: `#00000000` で完全透明の黒）を入れれば表現できます。または生成された CSS を手動で `transparent` や `rgba(0,0,0,0)` に置き換えることで、透明開始・透明終わりのグラデーションが作れます。

プリセットはどんなものが用意されていますか？

SUNSET（夕焼け風のオレンジピンク）・OCEAN（海の青緑）・NEON（サイバー系の紫青）・FIRE（炎の赤オレンジ）などがあります。デザインのたたき台として使い、その後に色や位置を微調整するのが効率的です。ゼロから作るより「30秒で目的に近い見た目」に達成できます。

グラデーションの方向（角度）を変えられますか？

はい、linear-gradient では角度（0-360度）をスライダーで自由に指定できます。0度で下から上、90度で左から右、180度で上から下、270度で右から左。斜めや任意の角度も可能。radial は形状（円/楕円）と中心位置を、conic は回転開始角度を調整できます。

入力データは外部に送信されますか？

いいえ、すべての処理はブラウザ内で完結します。作成したグラデーションの色情報や生成CSSは外部に送信されません。未公開デザインのブランドカラー、社内システム用の配色も安心して試せます。