CSS グラデーションの作成

2020-03-05

CSSでのグラデーションの記述に記載していきます。
backgroundにlinear-gradientを指定して設定します。

線形グラデーション

基本的な記述方法はこちら。

Sample-1

.sample1 {
    background: linear-gradient(#eee, #f90);
}

.sample1 {

background: linear-gradient(#eee, #f90);

}

角度をつける場合

linear-gradientには、角度をつけて、指定することができ、何も記述しない場合は、［90deg］と同じになります。

Sample-2

.sample2 {
    background: linear-gradient(0deg, #eee, #f90);
}

.sample2 {

background: linear-gradient(0deg, #eee, #f90);

}

Sample-3

.sample3 {
    background: linear-gradient(45deg, #eee, #f90);
}

.sample3 {

background: linear-gradient(45deg, #eee, #f90);

}

Sample-4

.sample4 {
    background: linear-gradient(90deg, #eee, #d00);
}

.sample4 {

background: linear-gradient(90deg, #eee, #d00);

}

角度については、to top, to leftなどのように、記述する方法もありますが、個人的には、細かい調整ができないので、あまり使わないですね。

円形グラデーション

CSSのグラデーションには、liear-gradientの他にでは、中心から広がるようにグラデーションをつける方法もあります。

Sample-5

.sanmpe5 {
    background: radial-gradient(#fff, #f00);
}

.sanmpe5 {

background: radial-gradient(#fff, #f00);

}

中心の位置や、色の広がり方などの指定などもできるようです。
こちらを参考にしてみてください。

https://developer.mozilla.org/ja/docs/Web/CSS/radial-gradient

余談

現在、ボタンなどにグラデーションをつけて、transitionなどで、グラデーションの色をアニメーションで変化させるということはできないようですので、ご注意ください。
どうしてもアニメーションで滑らかに変化させたい場合などは、擬似要素などを使って、グラデーションの要素を複数用意したり、ボタンより大きい要素を用意して、移動させたりなど、様々な方法があるようです。
今回は、その方法は記載しませんので、機会がありましたら、記載していきたいと思います。