CSSでグラデーションをかける方法

CSSで背景にグラデーションを適用する （線形）

CSSのlinear-gradient()関数を用いることで、背景に線形グラデーションを描くことができる。ただし、linear-gradient()関数は「background-color」やその他「color」には適用できないらしいので、例えばborderに線形グラデーションをかけることはできない模様。

0°でグラデーションをかける （水平方向）

90°でグラデーションをかける （垂直方向）

135°でグラデーションをかける

グラデーション色を追加することもできる

上の例では2色のグラデーションを用いたが、色の要素を増やすこともできる。

4色を指定したグラデーション

CSSで背景にグラデーションを適用する （放射）

CSSのradial-gradient()関数を用いることで、背景に放射グラデーションを描くことができる。