Animated Gradient Generator

Design moving gradient backgrounds with plain CSS. Tune colors, angle, duration, and background scale, then copy production-ready keyframes.

.animated-gradient {
  background: linear-gradient(120deg, #6366f1, #ec4899, #06b6d4);
  background-size: 300% 300%;
  animation: aifolder-gradient 8s ease infinite;
}

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

Giới thiệu Animated Gradient Generator

Tạo background gradient chuyển động bằng CSS chuẩn. Preview dùng animation của background-position nên code export không cần JavaScript.

Cách tạo animated gradient

  1. 1

    Chọn màu

    Đặt các màu gradient hoặc random để thử nhiều tổ hợp.

  2. 2

    Chỉnh góc

    Thay đổi hướng của linear gradient.

  3. 3

    Chỉnh chuyển động

    Đổi duration và background-size để kiểm soát tốc độ và biên độ chuyển động.

  4. 4

    Sao chép keyframes

    Copy class CSS và khối @keyframes vào stylesheet.

Câu hỏi về animated gradient

Animation có cần JavaScript không?

Không. Output dùng CSS background-position và @keyframes.

Có thể làm animation chậm hơn không?

Có. Tăng duration để gradient chuyển động chậm hơn.

Có nên hỗ trợ reduced motion không?

Có. Với UI production, nên giảm hoặc tắt animation trang trí bằng media query prefers-reduced-motion.

FAQ

animated gradient generator questions

?Why can an animated gradient affect readability?

The colors behind text change over time. Inspect the entire animation, then choose text and background combinations that remain readable throughout.

?Should I use continuous motion everywhere?

Use animation selectively and provide a reduced-motion alternative in the site where you use the output. A static gradient may suit text-heavy sections better.