css, javascript, html
[css] 서서히 색이 바뀌는 그라데이션 애니메이션 / 그라디언트Background
서산개백수
2023. 4. 29. 00:26
[css] 서서히 색이 바뀌는 그라데이션 애니메이션 / 그라디언트 Background
오늘은 정말 간단하지만 활용도가 높은,
그라데이션 / 그라디언트 배경 애니메이션을 만들어보았습니다.
▼ 색 조합에 따라 다양한 느낌을 줄 수 있는 Gradient Background을 만드는 방법 ▼
html
<div className='bg3'>
</div>
css
.bg {
color:#fff;
width: 100vw;
height: 100vh;
background: linear-gradient(-45deg, #ee8432, #ff606c, #edca35);
background-size: 400% 400%;
animation: colorChange 3s ease infinite;
}
@keyframes colorChange{
0%{
background-position: 0% 50%;
}
50%{
background-position: 100% 50%;
}
100%{
background-position: 0% 50%;
}
}
background: linear-gradient(-45deg, #색상코드, #색상코드, #색상코드);
색상코드 부분을 변경하면 원하는 색상으로 그라데이션 배경을 만들 수 있습니다.
background: linear-gradient(-45deg, #368cea, #7629ef, #50adf9);
background: linear-gradient(-45deg, #323232, #000000, #111111);