CSS Gradient Animator

Tạo animated gradient CSS

Màu sắc

Cài đặt

Thời gian animation: 10s

Hướng gradient

Presets

CSS Code

.animated-gradient {
  background: linear-gradient(45deg, #667eea 0%, #764ba2 33.33333333333333%, #f093fb 66.66666666666666%, #f5576c 100%);
  background-size: 400% 400%;
  animation: gradient 10s ease infinite;
}

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

CSS Gradient Animator - Tạo Animated Gradient Background Online Miễn Phí

Công cụ tạo CSS animated gradient background đẹp mắt. Tùy chỉnh 2-6 màu, tốc độ animation (2-30s), hướng gradient. 6 preset themes: Sunset, Ocean, Forest, Purple, Fire, Night. Preview realtime, copy CSS code với @keyframes sẵn sàng dùng.

Tính năng nổi bật

Tùy chỉnh 2-6 màu gradient

Điều chỉnh tốc độ animation (2-30 giây)

4 hướng gradient: 45°, 90°, 180°, 135°

6 preset themes đẹp có sẵn

Sunset, Ocean, Forest, Purple, Fire, Night

Preview animation realtime

Play/Pause để xem kỹ

Copy CSS code với @keyframes

Thêm/xóa màu dễ dàng

Animated Gradient Background là gì?

Animated gradient là hiệu ứng background với các màu gradient chuyển động mượt mà, tạo cảm giác sống động và hiện đại cho website. Được sử dụng phổ biến cho: hero sections, landing pages, login/signup pages, loading screens, và bất kỳ nơi nào cần thu hút sự chú ý. Hiệu ứng này hoàn toàn bằng CSS, không cần JavaScript, và được tối ưu bởi browser.

Lợi ích khi sử dụng

•Tạo background đẹp mắt, hiện đại
•Thu hút sự chú ý của visitors
•Không cần JavaScript, chỉ CSS thuần
•Performance tốt, chạy trên GPU
•Dễ tùy chỉnh màu sắc theo brand

Cách tạo animated gradient

1Chọn preset theme hoặc tự chọn màu
2Thêm/xóa màu bằng nút + và ×
3Điều chỉnh tốc độ animation bằng slider
4Chọn hướng gradient (45°, 90°, 180°, 135°)
5Xem preview và điều chỉnh cho đến khi ưng ý
6Copy CSS code và paste vào project

Câu hỏi thường gặp (FAQ)

Animated gradient có ảnh hưởng performance không?

CSS animation với background-position được tối ưu bởi browser và chạy trên GPU. Với gradient đơn giản (2-4 màu), performance rất tốt. Tránh dùng quá nhiều màu hoặc animation quá nhanh trên mobile.

Làm sao để gradient mượt hơn?

Tăng thời gian animation (10-20s) để chuyển động chậm và mượt hơn. Dùng ease timing function. Đảm bảo các màu chuyển tiếp tự nhiên (không quá tương phản).

Có thể dùng cho text không?

Có! Dùng background-clip: text và -webkit-text-fill-color: transparent để áp dụng animated gradient cho text. Tuy nhiên cần test kỹ trên các browsers.

Tại sao cần background-size: 400%?

background-size lớn hơn 100% tạo ra vùng gradient rộng hơn viewport. Animation di chuyển background-position qua vùng này tạo hiệu ứng màu sắc thay đổi liên tục.

Làm sao để gradient dừng ở vị trí cụ thể?

Thêm animation-fill-mode: forwards và đặt animation-iteration-count: 1. Gradient sẽ dừng ở keyframe cuối cùng.

Từ khóa liên quan

css gradient animatoranimated background cssgradient animationmoving gradient backgroundcss animated gradientgradient background generator

Hợp tác ngay với Tấn Phát Digital

Chúng tôi không chỉ thiết kế website, mà còn giúp doanh nghiệp xây dựng thương hiệu số mạnh mẽ. Cung cấp dịch vụ thiết kế website trọn gói từ thiết kế đến tối ưu SEO. Hãy liên hệ ngay với Tấn Phát Digital để cùng tạo nên những giải pháp công nghệ đột phá, hiệu quả và bền vững cho doanh nghiệp của bạn tại Hồ Chí Minh.