2色と角度を選ぶだけで、linear-gradient / radial-gradient のCSSをプレビュー付きで生成します。背景やボタンの装飾にそのまま貼り付けられます。
書き方の基本
linear-gradient の角度は、0degが下から上、90degが左から右です。CSSの回転（transform: rotate）とは基準が異なるため、意図と逆になったときは角度を確認してください。
background: linear-gradient(90deg, #2fa35a 0%, #1d7a41 100%); background: radial-gradient(circle at 50% 50%, #fff 0%, #ddd 100%);
きれいに見せるコツ
- 色相を大きく離すと濁って見えます。近い色相どうしを選ぶと自然です
- 明度差を付けると立体感が出ます（同じ明度だと平坦に見えます）
- 3色以上使う場合は、中間色の位置（0%〜100%）を調整して境目をなじませます
- 背景に文字を載せるなら、コントラスト比を確認してください
使いどころ
- ヒーローセクションの背景
- ボタンやカードの装飾
- 画像の上に重ねるオーバーレイ（文字を読みやすくする）
- 区切り線のフェード表現
よくある質問
Q 角度の基準はどこですか？
0degが下から上向き、90degが左から右向きです。時計回りに増えます。
Q 3色以上のグラデーションは作れますか？
CSSでは色を追加すれば可能です。生成したコードにカラーストップを足して調整してください。
Q 対応ブラウザは？
linear-gradient / radial-gradient は主要なブラウザで広くサポートされています。
Q 画像の上に重ねられますか？
できます。background に gradient と url() をカンマで並べると、グラデーションが手前に重なります。