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/