線形グラデーション
【構文】 background: linear-gradient(方向, カラーストップ, カラーストップ…)
| 項目 | 値 | 備考 |
|---|---|---|
| 方向 | to top to right to left to bottom 数値deg | 下から上 左から右 右から左 上から下 角度指定(0degは下から上) |
| カラーストップ | 色 位置, 色 位置… | 色とカラーストップの位置を指定 |
See the Pen
4-4_1 by Koji Seto (@yseseto)
on CodePen.
線形繰り返しグラデーション
【構文】 background: linear-repeating-gradient(方向, カラーストップ, カラーストップ)
最後のカラーストップが100%に満たない場合、同じグラデーションが繰り返されます。例えば最後のカラーストップが25%の場合、同じパターンが4回繰り返されるということです。
See the Pen
4-4_3 by Koji Seto (@yseseto)
on CodePen.
円形グラデーション
【構文】 background: radial-gradient((形状 サイズ), (中心), カラーストップ, カラーストップ…)
| 項目 | 値 | 備考 |
|---|---|---|
| 形状 | ellipse / circle | 楕円（デフォルト）／正円 |
| サイズ | farthest-corner closest-corner farthest-side closest-side | 最も遠い角まで（デフォルト） 最も近い角まで 最も遠い辺まで 最も近い辺まで |
| 中心 | center at top / at left / at right / at bottom x% y% | 中心（デフォルト） 上 / 左 / 右 / 下 左からx%、上からy% |
| カラーストップ | 色 位置, 色 位置… | 色とカラーストップの位置を指定 |
See the Pen
4-4_2 by Koji Seto (@yseseto)
on CodePen.
円形繰り返しグラデーション
【構文】 background: radial-repeating-gradient((形状 サイズ), (中心), カラーストップ, カラーストップ…)
線形繰り返しグラデーションと同様、最後のカラーストップが100%に満たない場合、同じパターンのグラデーションが繰り返されます。