CSS Gradation
背景画像
linear-gradient ← グラデーション
(45deg, ← 角度
rgba(255, 51, 51, 0.7) ← //始まりの色
0% 20%, ← //始まり位置からの距離
rgba(237, 101, 255, 0.7)40% 45%, ← //2色目
rgba(255, 153, 153, 0.7)60% 100%), ← //3色目
url(../images/bg_image.jpg); ← //背景画像
CSS Gradation
ぼかし加減を複数設定
linear-gradient(20.4deg, rgba(255, 51, 51, 0.7)0%, rgba(255, 153, 153, 0.7)46% 50%, rgba(240, 141, 141, 0.7)50% 100%);
CSS Gradation
方向を複数設定
linear-gradient(17.4deg, rgba(255, 153, 153, 0)46% 50%, rgba(240, 141, 141, 0.4)50% 100%),
linear-gradient(90deg, rgba(255, 51, 51, 0.7)0%, rgba(255, 153, 153, 0.7)60%);
CSS Gradation
円形
radial-gradient(circle at 70% -10%, rgba(122, 182, 83, .5) 5%, rgba(180, 219, 155, 0.5) 30%, rgba(169, 209, 142,
.5)
30% 100%),
radial-gradient(circle at left, #A9D18E 0% 25%, #B5DB9C 50%, #A9D18E 50% 100%);
CSS Gradation
アニメーション
.bl_gradationArea_animation {
animation: gradation 12s ease infinite;
}
@keyframes gradation {
0% {background-position: 0% 50%}
50% {background-position: 50% 100%}
100% {background-position: 0% 50%}
}