Mã màu gradient: 100 mẫu đẹp nhất 2026 kèm code CSS
Mã màu gradient là cách nhanh nhất để giao diện website, banner hay bài đăng mạng xã hội trông hiện đại và có chiều sâu hơn so với một màu đơn sắc. Trong bài viết này, Phong Lâm Media tổng hợp 100 mã màu gradient đẹp nhất 2026, chia theo 10 tông màu phổ biến, kèm mã HEX và nút Copy CSS để bạn dán thẳng vào dự án.
Mỗi mẫu đều được trình bày dưới dạng ô xem trước thực tế, nên bạn có thể so sánh trực quan trước khi chọn. Dù bạn là người thiết kế UI, lập trình viên front-end hay chủ shop đang tự làm banner, danh sách mã màu gradient dưới đây sẽ giúp tiết kiệm rất nhiều thời gian.
Mã màu gradient là gì?
Gradient (dải màu chuyển tiếp) là hiệu ứng hai hay nhiều màu hòa trộn mượt mà vào nhau theo một hướng nhất định. Một mã màu gradient thường gồm: kiểu chuyển màu (thẳng hoặc tròn), góc hoặc hướng chuyển và danh sách các mã màu HEX tại từng điểm dừng.
Trong thiết kế web, gradient được dùng cho nền section, nút bấm, chữ tiêu đề, thẻ sản phẩm và ảnh minh họa. So với ảnh nền, gradient viết bằng CSS nhẹ hơn rất nhiều, không làm chậm tốc độ tải trang và hiển thị sắc nét trên mọi màn hình.
Các kiểu gradient phổ biến
- Linear gradient – chuyển màu theo đường thẳng, ví dụ từ trái sang phải hoặc chéo 135°. Đây là kiểu được dùng nhiều nhất.
- Radial gradient – lan tỏa từ tâm ra ngoài theo hình tròn hoặc elip, tạo cảm giác ánh sáng.
- Conic gradient – xoay quanh một điểm như vòng thuần sắc, thích hợp cho biểu đồ tròn và hiệu ứng đặc biệt.
Cách dùng mã màu gradient trong CSS
Chỉ cần thuộc tính background (hoặc background-image) với hàm linear-gradient(). Cú pháp cơ bản:
.hero {
background: linear-gradient(135deg, #667eea, #764ba2);
}
/* Gradient cho chữ tiêu đề */
.title-gradient {
background: linear-gradient(90deg, #f12711, #f5af19);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}Tham số đầu tiên là góc chuyển màu (90deg từ trái sang phải, 180deg từ trên xuống, 135deg chéo). Các tham số tiếp theo là mã màu, có thể thêm vị trí phần trăm như #2193b0 0%, #6dd5ed 100%. Xem đầy đủ cú pháp tại tài liệu linear-gradient của MDN.
Nếu dùng theme BIGSPY AI Theme WP, bạn có thể dán trực tiếp hai mã màu (ví dụ #667eea #764ba2) vào ô nhập trong bảng Gradient của khối, bấm Áp dụng là xong, không cần viết CSS.
1. Mã màu gradient xanh dương (1–10)
Tông xanh dương mang cảm giác tin cậy, công nghệ và chuyên nghiệp – rất hợp cho website doanh nghiệp, ngân hàng, phần mềm.
2. Mã màu gradient xanh lá (11–20)
Xanh lá gợi sự tươi mới, tự nhiên và tăng trưởng – phù hợp thương hiệu nông sản, sức khỏe, tài chính xanh.
3. Mã màu gradient tím (21–30)
Tím là màu của sự sáng tạo, sang trọng và bí ẩn – thường thấy ở thương hiệu mỹ phẩm, công nghệ, âm nhạc.
4. Mã màu gradient hồng (31–40)
Hồng mang lại cảm giác ngọt ngào, trẻ trung và nữ tính – lý tưởng cho spa, thời trang, quà tặng.
5. Mã màu gradient cam và vàng (41–50)
Cam – vàng tạo năng lượng, ấm áp và kích thích hành động – rất hiệu quả cho nút kêu gọi, ưu đãi, ẩm thực.
6. Mã màu gradient đỏ (51–60)
Đỏ thể hiện sức mạnh, đam mê và sự khẩn cấp – dùng cho khuyến mãi, thể thao, nhà hàng.
7. Mã màu gradient pastel (61–70)
Pastel nhẹ nhàng, dịu mắt, giúp nội dung nổi bật mà không gây rối – hợp làm nền section, thẻ, ảnh minh họa.
8. Mã màu gradient tối, sang trọng (71–80)
Gradient tối tạo chiều sâu và cảm giác cao cấp – thích hợp cho hero banner, website công nghệ, chế độ tối.
9. Mã màu gradient hoàng hôn và thiên nhiên (81–90)
Lấy cảm hứng từ bầu trời, biển và núi rừng – những bảng màu chuyển tiếp mềm mại, giàu cảm xúc.
10. Mã màu gradient đa sắc (91–100)
Gradient nhiều màu nổi bật, cá tính – dùng cho tiêu đề lớn, nút đặc biệt, banner sự kiện.
Mẹo chọn mã màu gradient đẹp và chuyên nghiệp
- Chọn màu gần nhau trên vòng tròn màu (ví dụ xanh dương – xanh ngọc) để chuyển tiếp mượt, tránh vùng màu xám bẩn ở giữa.
- Giới hạn 2–3 màu cho nền lớn; dải nhiều màu chỉ nên dùng cho chi tiết nhỏ như nút, tiêu đề.
- Kiểm tra độ tương phản chữ: chữ trắng hợp với gradient tối, chữ đậm màu hợp với gradient pastel. Tỷ lệ tương phản nên đạt tối thiểu 4.5:1.
- Đồng bộ màu thương hiệu: lấy màu chính của logo làm điểm đầu, màu phụ làm điểm cuối.
- Dùng góc 135° cho cảm giác năng động; góc 180° cho nền section trang nhã.
Mã màu gradient theo mục đích sử dụng
- Website doanh nghiệp, công nghệ: nhóm xanh dương, tối sang trọng.
- Spa, mỹ phẩm, thời trang: nhóm hồng, tím, pastel.
- Khuyến mãi, nút kêu gọi: nhóm cam vàng, đỏ.
- Nông sản, sức khỏe: nhóm xanh lá, thiên nhiên.
Bạn đang cần một website có màu sắc đồng bộ, chuẩn nhận diện thương hiệu? Tham khảo dịch vụ thiết kế website và kho giao diện mẫu của Phong Lâm Media.
Câu hỏi thường gặp về mã màu gradient
Kết luận
Trên đây là 100 mã màu gradient đẹp nhất được chia theo từng tông màu, kèm mã HEX và code CSS sẵn sàng sử dụng. Hãy lưu lại bài viết để tra cứu nhanh mỗi khi cần chọn màu cho website, banner hay bài đăng. Nếu bạn cần tư vấn thiết kế giao diện, đừng ngần ngại liên hệ Phong Lâm Media.
