CSS グラデーション生成

機能

• 線形・放射状・円錐の三種類
• 0〜360 度の角度調整。線形と円錐の両方に効きます
• 開始色と終了色はカラーピッカーで選択
• 任意の中間ストップ。位置は 0〜100% で調整できます
• 何を変えてもプレビューが即座に再描画。「生成」ボタンはありません
• 下にそのままコピーできる CSS ルール（`.gradient` セレクター付き）
• コードはシンタックス ハイライト付きで、コピーはボタン一つ
• プレビューは市松模様の背景。半透明や境界が一目で分かります
• 色値と角度は検証済みで、出力される CSS は常に有効です
• 計算はすべてブラウザー内で完結し、何も送信されません

使い方

1. まず種類を選びます：線形・放射状・円錐
2. 角度を動かし、カラーピッカーで開始色と終了色を選ぶと、プレビューがすぐ変わります
3. 三色の変化にしたいときは「中間ストップ」にチェックを入れ、色と位置を調整します
4. 良ければコピー ボタンで CSS を取り出してください

よくある質問

三種類はどう使い分けますか？

線形が最も汎用的です：ボタンの塗り、カードのハイライト、ページ背景の階調。角度が方向を決めます（`90deg` は左から右、`0deg` は下から上）。放射状は中心のある表現に向きます：スポットライト、球体のハイライト、中心から外へ消える発光感。円錐は中心の周りに色を配分するので、プログレス リング、色相環、円グラフを作る最も簡単な方法です —— 忘れられがちですが、「角度で色を分ける」のが目的ならこれしかありません。

角度はどう測りますか？なぜ 0 度が左から右ではないのですか？

CSS の `0deg` は上向き（下から上）で、角度は時計回りに増えます：`90deg` が左から右、`180deg` が上から下、`270deg` が右から左です。これは CSS の座標系（y が下向き）と、数学の慣習に従うグラデーション角度の組み合わせによるものです。キーワード指定（`to right`、`to bottom right`）も使えますが、固定角度との違いはレスポンシブです —— キーワードは要素の縦横比に応じて対角線を横切るよう角度を自動調整しますが、固定角度は調整しません。

中間ストップを切ると CSS からどうなりますか？

まるごと出力されません。 「50% の位置に両端と同じ色」という空のストップを残すのではなく、という意味です。それはコード上は何かをしていそうに見えて実際には何もせず、後から削除しづらくするだけです。チェックを外せばコードにはストップが二つだけになります。プレビューで見えているものとコピーされるものが同じコードであることは、シェル側の契約ガードレールが保証しています（プレビューに適用される宣言はすべて出力 CSS に含まれること）。

グラデーションの色は別の用途にも使えますか？

使えます —— 端点の色値は普通の 16 進表記なので、コピーしてそのまま扱えます。そのうちの一色を軸に組み合わせを導きたいときは「配色スキーム」ツールを、既成のグラデーション 180 種類から着想を得たいときは「グラデーション配色」ツールをお使いください。どちらも本ツールと補完関係にあります：ここではゼロから一段を作り、あちらでは既成のライブラリから選びます。