Tạo CSS Gradient trực tuyến
Chữ trắng: thấp nhất 2,28:1 · chữ đen: thấp nhất 6,47:1 → nên dùng chữ đen (đạt AA ở mọi chỗ).
Điểm màu
Mã để dùng
background: #FF512F;
background: linear-gradient(90deg, #FF512F 0%, #F09819 100%);Mở các điểm màu này trong: Phối màu · Kiểm tra tương phản
Mã màu gradient đẹp có sẵn
Gradient là gì?
Gradient (màu chuyển sắc) là dải màu chuyển dần từ màu này sang màu khác. Trong CSS, gradient không phải là màu mà là một ảnh do trình duyệt tự vẽ, nên được gán cho background hoặc background-image chứ không gán cho color hay background-color. Gradient không cần tải file ảnh và luôn sắc nét ở mọi kích thước màn hình.
Cách tạo gradient bằng công cụ
- Chọn kiểu Linear (chuyển theo đường thẳng) hoặc Radial (toả từ tâm ra).
- Với linear, kéo thanh Góc: 0° là từ dưới lên, 90° từ trái sang phải, 180° từ trên xuống.
- Đổi màu và vị trí từng điểm màu; thêm điểm nếu cần nhiều hơn hai màu (tối đa 8).
- Bấm Sao chép CSS rồi dán vào stylesheet. Hoặc bắt đầu nhanh từ một mẫu có sẵn bên dưới.
Cú pháp gradient trong CSS
| Hàm | Hình dạng | Ví dụ |
|---|---|---|
linear-gradient() |
Chuyển màu theo một đường thẳng có góc | linear-gradient(90deg, #FF512F, #F09819) |
radial-gradient() |
Toả tròn hoặc elip từ một tâm | radial-gradient(circle, #FFD200, #F7971E) |
conic-gradient() |
Quét quanh tâm như kim đồng hồ — dùng cho biểu đồ tròn, bánh xe màu | conic-gradient(red, yellow, lime, aqua, blue, magenta, red) |
Công cụ xuất thêm một dòng background màu đơn đứng trước làm phương án dự phòng: nếu vì lý do nào đó gradient không hiển thị, phần tử vẫn có màu nền để chữ đọc được.
Mẹo để gradient trông đẹp
- Chọn hai màu gần nhau trên vòng màu (cam → vàng, xanh dương → xanh ngọc). Hai màu đối nhau như đỏ → xanh lá sẽ tạo vùng xám đục ở giữa.
- Gradient ánh kim (gold, bạc, rose gold) cần ít nhất ba điểm màu xen kẽ sáng – tối để giả lập phản chiếu, như các mẫu Vàng gold và Bạc ở trên.
- Đặt chữ trên gradient: kiểm tra độ tương phản của chữ với cả màu đầu lẫn màu cuối.
- Để tránh hiện tượng sọc màu trên vùng chuyển rất dài, hãy thêm một điểm màu trung gian hoặc rút ngắn khoảng chuyển.
Hai màu gần nhau trên bánh xe màu thường cho gradient mượt nhất: chọn cặp màu theo quy tắc tương đồng trong công cụ phối màu, hoặc dùng các tông màu pastel cho nền dịu mắt.
