Tạo CSS gradient

Cách hoạt động

Gradient được viết trong CSS dưới dạng một khai báo duy nhất có cú pháp dễ nhớ nhầm, nhất là quy ước về góc và vị trí các điểm dừng màu. Nhìn kết quả trong khi chỉnh nhanh hơn việc tải lại trang để kiểm tra.

Quy ước góc làm nhiều người vấp

Trong CSS, 0 độ hướng lên trên và góc tăng theo chiều kim đồng hồ, nên 90 độ chạy từ trái sang phải và 180 độ chạy từ trên xuống dưới. Điều này khác với quy ước toán học và với một số công cụ thiết kế, đó là lý do gradient sao chép từ nơi khác thường bị xoay.

Ba loại

Linear chạy theo đường thẳng và bao quát gần như mọi cách dùng thực tế. Radial lan ra từ một điểm, phù hợp với hiệu ứng phát sáng và đèn rọi. Conic quét quanh một tâm và là thứ dùng để tạo biểu đồ tròn và bánh xe màu.

Gradient là ảnh, không phải màu

Đây là điều khác khiến nhiều người vấp. CSS coi gradient là ảnh nền, nên nó dùng được trong background và background-image nhưng không dùng được trong color, border-color hay bất kỳ thứ gì cần màu đơn thuần. Gradient cho văn bản cần background-clip, là một kỹ thuật riêng.

Thêm màu ở giữa

Hai điểm dừng cho một phép pha trộn gọn gàng. Điểm thứ ba cho phép bạn dẫn quá trình chuyển qua một sắc độ khác, tránh màu xám đục xuất hiện khi hai màu đối lập pha trực tiếp với nhau.