Tạo nền gradient thay đổi khi cuộn (scroll) với CSS

Bạn có thể tạo hiệu ứng nền gradient thay đổi màu khi người dùng cuộn trang bằng cách kết hợp background: linear-gradient với chiều cao trang lớn. Dưới đây là ví dụ:

Ví dụ mã nguồn

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    height: 250vh; /* Tạo thanh cuộn */
    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>Ví dụ thay đổi Gradient nền khi cuộn</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;">Cuộn để xem hiệu ứng.</h2>
</body>
</html>

Cách hoạt động

Khi thiết lập height: 250vh (2.5 lần chiều cao viewport), trình duyệt sẽ tạo thanh cuộn dọc. Gradient được định nghĩa với nhiều điểm dừng màu (color stops) ở các vị trí phần trăm khác nhau. Khi cuộn, các vùng màu khác nhau của gradient sẽ hiển thị, tạo cảm giác nền thay đổi màu.

Mẹo nâng cao

Để có hiệu ứng mượt mà hơn, bạn có thể dùng JavaScript để thay đổi background-position hoặc dùng background-attachment: fixed kết hợp với nhiều layer gradient.