CSS를 이용해서 배경에 그라데이션을 적용하기 위해 linear-gradient() 함수를 사용할 수 있습니다.

background: linear-gradient(45deg, red, blue);

그러나 선형 그라데이션은 시작부터 끝까지 변화가 일정하게 이루어지기 때문에 색상 변화의 진입점과 이탈점이 뚝 끊기게 느껴질 수 있습니다.

그래서 transition이나 animation에 쓰이는 easing-function을 사용할 수 있으면 좋겠다는 생각이 드는데, 아쉽게도 현재 CSS의 그라데이션은 linear 방식밖에 지원하지 않습니다. 제안이 존재하긴 하지만, 2017년에 처음 제안된 이후로 아직 구현에 대한 논의가 제대로 되지 않아 근시일 내엔 기대하기 어려울 것 같습니다.

다만 linear-gradient()가 여러 색상과 color-stop을 조합하여 여러 단계의 색상 지점을 가진 그라데이션을 그릴 수 있는 것을 이용하면, 계산을 통해 이런 동작을 흉내낼 수 있습니다.

이런 계산을 직접 하기엔 다소 번거로운 점이 있어 몇가지 수치만 바꿔 사용할 수 있도록 컴포넌트를 제작했습니다. 여러가지 CSS 단위와 값 입력을 지원하기 때문에, 여러 값을 바꿔보며 테스트해보길 바랍니다.

사용에 주의할 점은 완만한 변화가 이루어질 수 있도록 linear 보다 전후를 합쳐 20~40% 정도 더 넓은 범위를 그라데이션 영역으로 잡아주어야 합니다. 그리고 Firefox 브라우저에선 다소 깨져보일 수 있으니 단계를 조절하여 테스트 후 사용하길 바랍니다.

이 포스팅은 Easing Gradients 글을 참고하여 작성했습니다.