웹 페이지를 스크롤할 때 배경색이 자연스럽게 변하는 그라데이션 효과는 시각적인 몰입감을 높여주는 인기 있는 디자인 기법입니다. CSS의 linear-gradient 함수를 활용하면 별도의 JavaScript 없이도 간단하게 구현할 수 있습니다.
핵심 원리
이 효과의 핵심은 body 요소의 높이를 250vh처럼 화면보다 크게 설정하여 스크롤 공간을 확보하는 것입니다. 그라데이션이 세로 방향으로 길게 펼쳐지기 때문에, 사용자가 아래로 스크롤할수록 배경색이 단계적으로 어두운 색에서 밝은 색으로 전환되는 것처럼 보입니다.
전체 예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 250vh;
color: white;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(
141deg,
#a47dff 0%,
#4e28a7 40%,
#22053d 65%,
#72a4ff 75%
);
}
</style>
</head>
<body>
<h1>Change Background Gradient on Scroll Example</h1>
<p style="font-size: 30px;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, laborum minus? Vero accusantium laborum quas cum, sed obcaecati quibusdam dignissimos.
</p>
<h2 style="position:fixed;">Scroll to see the effect.</h2>
</body>
</html>코드 설명
- height: 250vh; — 뷰포트 높이의 2.5배로 body를 늘려 충분한 스크롤 영역을 만듭니다.
- linear-gradient(141deg, ...) — 141도 각도의 대각선 그라데이션을 정의하며, 색상 정지점(color stops)을 퍼센트로 지정해 색 전환 위치를 조절합니다.
- position: fixed; — 안내 문구가 스크롤과 무관하게 화면에 고정되어 사용자에게 효과를 확인하도록 안내합니다.
실행 결과
위 코드를 실행하면 페이지 상단에서는 보라색 계열의 부드러운 그라데이션 배경이 나타납니다.
아래로 스크롤하면 그라데이션이 진한 남색을 지나 밝은 파란색으로 자연스럽게 이동하는 것을 확인할 수 있습니다.
마무리 팁
그라데이션의 각도와 색상 정지점 값을 조정하면 다양한 분위기를 연출할 수 있습니다. 예를 들어 각도를 180deg로 변경하면 수직 방향 그라데이션이 되어 스크롤에 따른 색 변화가 더욱 뚜렷해집니다. 또한 background-attachment: fixed; 속성을 함께 사용하면 배경이 고정된 채 콘텐츠만 스크롤되는 패럴랙스 느낌의 효과도 만들 수 있습니다.