Hiệu ứng Gradient thường được dùng để tạo độ dốc cho ảnh, làm cho các màu sắc chuyển tiếp qua lại lẫn nhau một cách hài hòa.

Hiệu ứng chuyển sắc (Gradient) với CSS3
Hiệu ứng chuyển sắc (Gradient) với CSS3

Cú pháp

Trong đó  direction gồm các giá trị:

  • Giá trị đơn  to top hoặc  to left hoặc  to right hoặc  to bottom thì nó sẽ kéo theo cạnh đối diện.
  • Giá trị đôi ( to top left) hoặc ( to left right) nếu bạn muốn chỉ rõ kéo từ cạnh nào sang cạnh nào (tức là đường chéo).

Nếu ta không truyền  direction thì theo mặc định nó sẽ có giá trị  top (tức là  top –  bottom).
Tương tự chúng ta có code Hack CSS như sau:

Có một lưu ý là đối với code Hack CSS thì  direction không có chữ  to.

Ví dụ

Hiệu ứng Gradient

Bạn có thể tạo hiệu ứng chuyển động màu sắc cho hình nền bằng cách vào trang CSS Gradient Animator, tùy chỉnh và sao chép đoạn mã được cung cấp để sử dụng cho website của mình.

Hiệu ứng chuyển màu
Hiệu ứng chuyển màu (Gradient) với CSS3 – https://www.gradient-animator.com/