Một trong những ví dụ gradient được nhận diện rộng rãi nhất ở Việt Nam không nằm trong sách CSS mà nằm ngay trên điện thoại của hàng chục triệu người dùng: logo ví điện tử MoMo, với dải màu hồng chuyển tím đặc trưng, chính là một conic hoặc radial gradient được lặp lại trong toàn bộ hệ thống nhận diện thương hiệu.
Ba cách CSS lan tỏa màu sắc
linear-gradient(45deg, red, blue) kéo giãn màu dọc theo một đường thẳng theo góc cho trước — loại phổ biến nhất cho nền nút bấm, banner, thẻ. radial-gradient(circle, yellow, orange) lan tỏa màu theo vòng tròn hoặc elip đồng tâm từ một điểm ra ngoài, phù hợp mô phỏng hiệu ứng đèn chiếu. conic-gradient(red, yellow, green, blue, red) xoay màu quanh một điểm trung tâm như kim đồng hồ, và là loại duy nhất có thể dựng biểu đồ tròn hay chỉ báo tiến trình dạng vòng mà không cần đồ họa bổ sung.
Điểm dừng màu và họa tiết lặp lại
Mỗi màu có thể được neo vào một vị trí phần trăm cụ thể, ví dụ linear-gradient(red 0%, yellow 50%, blue 100%), để kiểm soát mức độ đột ngột của chuyển tiếp. Các hàm repeating-linear-gradient() và repeating-radial-gradient() tự động lặp lại cùng một chuỗi điểm dừng, tạo ra họa tiết sọc hoặc bàn cờ chỉ với một dòng CSS.
Vì sao cần điều này
- Nhanh chóng chọn và sao chép mã CSS gradient có sẵn mà không cần chỉnh góc và màu thủ công.
- Hiểu loại gradient nào phù hợp với một hiệu ứng thị giác cụ thể.
- Tinh chỉnh chính xác vị trí các điểm dừng màu cho sự chuyển tiếp mong muốn.
Gradient như một dấu hiệu thương hiệu
Dải màu chuyển sắc mượt mà không còn chỉ là hiệu ứng trang trí — với các ứng dụng fintech Việt Nam như MoMo, gradient hồng-tím đã trở thành một phần cốt lõi của bộ nhận diện, xuất hiện nhất quán từ biểu tượng ứng dụng đến giao diện thanh toán. Việc dựng lại chính xác một gradient thương hiệu như vậy bằng CSS thay vì dùng ảnh nền giúp giao diện web tải nhanh hơn và hiển thị sắc nét ở mọi độ phân giải màn hình.