[css] 서서히 색이 바뀌는 그라데이션 애니메이션 / 그라디언트Background

[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);