CreaTools LogoCreaTools
Tech Notes
Gradient Maker

linear-gradientの角度指定｜0deg=上向き、時計回りを30秒で理解

2025-09-05

:::note ※角度指定で混乱したときの「判断用」記事です :::

結論（30秒で分かる要点）

  • 角度の基準：0deg = 下→上（12時方向）、時計回りに増加
  • 使い分け：水平・垂直・斜め45度は to キーワード、細かい角度は数値指定
  • 迷ったら：理論より先に Gradient Maker で目視確認が早い

💡 角度を視覚的に試したい → Gradient Maker で角度を調整する

よくある失敗（実務で踏む地雷）

❌ 失敗1：数学の角度と混同する

CSSの角度は数学の座標系と異なる。

座標系0度の位置回転方向
数学右（3時方向）反時計回り
CSS上（12時方向）時計回り

「90度なのに横方向？」という混乱はここから来る。

❌ 失敗2：単位の省略

/* ❌ 動かない */
linear-gradient(90, red, blue)

/* ✅ 単位必須 */
linear-gradient(90deg, red, blue)

❌ 失敗3：to と数値の混在

/* ❌ 構文エラー */
linear-gradient(to 90deg, red, blue)

/* ✅ どちらか一方 */
linear-gradient(90deg, red, blue)
linear-gradient(to right, red, blue)

CSSの角度ルール

角度方向覚え方
0deg下→上12時の方向
90deg左→右3時の方向
180deg上→下6時の方向
270deg右→左9時の方向

覚え方：時計の針が指す方向にグラデーションの「終点」がある。

to キーワードとの対応

/* 同じ意味のペア */
linear-gradient(0deg, red, blue)
linear-gradient(to top, red, blue)

linear-gradient(90deg, red, blue)
linear-gradient(to right, red, blue)

linear-gradient(180deg, red, blue)
linear-gradient(to bottom, red, blue)

to は「終点の方向」を指定する。可読性が高いので、単純な方向指定には to を推奨。

斜め方向

角度to キーワード
45degto top right
135degto bottom right
225degto bottom left
315degto top left

具体例：このUIならこの設定

ケース1：ヒーローセクションの上から下

.hero {
  background: linear-gradient(to bottom, #667eea, #764ba2);
  /* または */
  background: linear-gradient(180deg, #667eea, #764ba2);
}

→ Generatorで試す

ケース2：ボタンの斜めグラデーション（左上→右下）

.button {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

ケース3：動的に角度を変える（CSS変数）

.gradient {
  --angle: 135deg;
  background: linear-gradient(var(--angle), #667eea, #764ba2);
}

.gradient:hover {
  --angle: 45deg;
}

CSS変数と組み合わせる場合は数値指定が必須。

どちらを使うべきか

場面推奨理由
水平・垂直・斜め45度to キーワード可読性が高い
30度、60度など細かい角度数値指定to では表現不可
動的に角度を変える数値指定CSS変数と組み合わせやすい
チーム開発to キーワード意図が明確

ブラウザ対応

ブラウザ対応状況備考
Chrome✅全機能対応
Safari✅全機能対応
Firefox✅全機能対応
Edge✅全機能対応

角度指定は2025年現在、全モダンブラウザで問題なく動作する。

まとめ：判断基準

条件推奨アプローチ
角度が分からないGradient Maker で目視確認
単純な方向（上下左右斜め）to キーワード
細かい角度調整数値指定（deg）
JSから動的に変更CSS変数 + 数値指定

この記事で解決しない場合