ひとりCSS Advent Calendar 2022 5日目です。
conic-gradientとrepeating-linear-gradientを使ってみます。
どちらも background プロパティ background-image プロパティに指定する値。
conic-gradient とは
原点を中心に周りを周りながら色が変化する。conic = 円錐
- angle - 角度
- from - 開始角度をずらせる
- at
- position
- 色と角度
- 使い方しだいで円グラフや市松模様の表現もできる(おもしろい)
repeating-linear-gradient
線形グラデーションを繰り返し並べられる。
- angle 角度
- 色と位置
遊んでみた
See the Pen gradient by Beco (@becolomochi) on CodePen.