文字などにアクセントを付ける CSS linear-gradient

文字などにアクセントを付ける

こんな感じでアンダーラインというかアクセントを付けてみたかったのでちょいと CSS をお勉強

.span1 {
background: linear-gradient(to bottom,rgba(0, 0, 0, 0) 50%,#ffb9e9)
}
.span2 {
background: linear-gradient(to bottom,rgba(0, 0, 0, 0) 50%,#f7d459)
}
.span3 {
background: linear-gradient(to bottom,rgba(0, 0, 0, 0) 50%,#f21e5a)
}
.span4 {
background: linear-gradient(to bottom,rgba(0, 0, 0, 0) 50%,#7e99f2)
}
.span5 {
background: linear-gradient(to bottom,rgba(0, 0, 0, 0) 50%,#00ab10)
}

linear-gradient

グラデーションの方向

透明度
1 が「完全に不透明」
0 が「完全に透明」

色の変わる位置