Một background gradient tuyệt đẹp với hiệu ứng chuyển màu mượt mà, được implement hoàn toàn bằng CSS. Thông qua việc sử dụng @keyframes để di chuyển vị trí background, chúng ta có thể tạo ra luồng màu sắc thay đổi một cách tự nhiên.

Mã nguồn (Source Code)

Bạn có thể copy đoạn code dưới đây và sử dụng ngay trong dự án của mình.

<div class="animated-gradient-bg"></div>

.animated-gradient-bg {
  width: 100%;
  height: 100vh;
  background: linear-gradient(
    45deg,
    #ff7b00,
    #ff0055,
    #a200ff,
    #0055ff,
    #00ffcc
  );
  background-size: 400% 400%;
  animation: gradient-flow 15s ease infinite;
}

@keyframes gradient-flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

Giải thích chi tiết

Bí quyết để tạo ra hiệu ứng background chuyển động này nằm ở 2 điểm cốt lõi:

1. background-size: 400% 400%: Phóng to kích thước của gradient lên gấp 4 lần so với kích thước phần tử chứa nó, khiến gradient tràn ra ngoài khung hình.
2. @keyframes gradient-flow: Di chuyển mượt mà thuộc tính background-position từ 0% đến 100%, sau đó quay về 0%. Quá trình này làm cho phần gradient bị ẩn (do phóng to) từ từ trượt qua lại, tạo cảm giác màu sắc đang liên tục thay đổi.

Bạn hoàn toàn có thể tùy chỉnh lại màu sắc trong linear-gradient hoặc thay đổi thời lượng (duration) của animation để phù hợp với design system của dự án.