CSS Gradient 作り方｜linear・radial の指定

（更新: 2026年7月19日 ） CSS Gradient デザイン
結論

グラデーションは linear-gradient / radial-gradient で書きます。角度と色停止をプレビューで決めてから CSS をコピーするのが最短。

最短の書き方

/* 左→右 */
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);

/* 中心から外側 */
background: radial-gradient(circle at center, #00d2ff 0%, #3a7bd5 100%);

0deg は下→上、90deg は左→右、180deg は上→下が一般的な覚え方です。

よくある失敗: グレーゾーン

補色同士をそのまま混ぜると、途中が濁って見えます。類似色（近い色相）でつなぐか、途中に中間色ストップを足すと綺麗になります。

ツールで試す

CSS グラデーション生成 はスライダーで角度・色・位置を調整し、できた CSS をそのままコピーできます。画像を作らずコードだけで背景を作れるので、レスポンシブでも劣化しません。

関連