CSSのグラデーション【現役エンジニアが解説】
今回は、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というクラスを持つ要素の背景色を赤と青の扇形グラデーションにしています。