CSSのグラデーション【現役エンジニアが解説】

PROGRAM

今回は、CSSのグラデーションについて、3種類に分け、簡単に解説していきます。

線形

linear-gradientで線形のグラデーションを表現できます。

backgroundプロパティの値にlinear-gradient(色, 色)を指定します。

.hoge{
    background:linear-gradient(red, blue);
}

上記のコードでは、hogeのクラスの要素の背景色を赤と青の線形グラデーションにしています。

放射

radial-gradientでは放射のグラデーションを表すことができます。

backgroundプロパティの値にradial-gradient(色, 色)の形式で指定します。

.hoge{
  background:radial-gradient(red, blue);
}

上記のコードでは、hogeというクラスの要素の背景色を赤と青の放射グラデーションにしています。

扇形

conic-gradientを使うと扇形のグラデーションを使用することが可能です。

backgroundプロパティの値にconic-gradient(色, 色)を指定することで使うことができます。

.hoge{
  background:conic-gradient(red, blue);
}

上記のコードでは、hogeというクラスを持つ要素の背景色を赤と青の扇形グラデーションにしています。