CSS linear-gradient 배경에 transition 트랜지션 적용시키기

일반적으로 background에 linear-gradient 적용하는 법

.element {
  background: linear-gradient(red, blue);
}

일반적으로 linear-gradient는 위와같이 작성합니다.

하지만 background 속성은 transition에 적용되지 않습니다.

.element {
  background: linear-gradient(red, blue);
	transition: background 0.2s ease; //적용안됨
}

linear-gradient 속성을 transition 적용하는 법

간단하게 background-image 속성을 이용하면 됩니다.

.element {
   background-image: linear-gradient(red, blue);
	 transition: background-image 0.2s ease; //적용OK
}

이 방법을 통해 배경색과 gradient의 트랜지션을 한번에 설정할 수 있습니다.

.element {
  background-image: linear-gradient(red, blue);
  background-color: red; /* 초기 배경 색상 설정 */
  transition: background-color 0.5s ease;
}

.element:hover {
  background-color: blue; /* 변경된 배경 색상 설정 */
}

위 코드를 적용하여 header를 스크롤에 따라서 배경색이 변경될 때 transition을 적용하였습니다.