Tạo gradient CSS
Thiết kế gradient tuyến tính, hướng tâm hoặc hình nón, xem nó cập nhật trực tiếp và sao chép quy tắc background CSS.
Chạy hoàn toàn trong trình duyệt của bạn
Điểm dừng màu
Mẫu có sẵn
Màu của điểm dừng có thể là bất kỳ màu nào trình duyệt của bạn hiểu (HEX, tên màu, rgb(), hsl(), oklch()). Tối đa 10 điểm dừng. Vị trí tính theo phần trăm; đầu ra là CSS thuần, không có tiền tố trình duyệt.
Cách tạo gradient CSS
- Chọn Tuyến tính, Hướng tâm hoặc Hình nón, hoặc bắt đầu từ một mẫu có sẵn.
- Đặt góc hoặc vị trí, rồi chỉnh các điểm dừng màu: đổi màu và vị trí của từng điểm, thêm điểm dừng và di chuyển chúng lên hoặc xuống.
- Bấm Sao chép CSS và dán quy tắc vào stylesheet của bạn. Đánh dấu tùy chọn dự phòng nếu bạn muốn có một dòng màu đơn sắc phía trước.
Đọc một gradient CSS
Gradient CSS là một hình ảnh do chính trình duyệt vẽ, nên nó co giãn theo mọi kích thước và không tốn lượt tải xuống. Gradient tuyến tính pha các màu dọc theo một đường xác định bởi một góc. Gradient hướng tâm pha màu lan ra từ một điểm tâm theo hình tròn hoặc elip. Gradient hình nón quét các màu quanh một tâm như kim đồng hồ, nên là lựa chọn tự nhiên cho biểu đồ tròn và vòng màu.
Mỗi điểm dừng màu là một màu cộng với một vị trí dọc theo đường gradient, viết theo phần trăm. Giữa hai điểm dừng, trình duyệt pha màu mượt mà. Nếu hai điểm dừng có cùng vị trí, chỗ pha màu không có độ rộng và bạn có một cạnh sắc. Nếu một điểm dừng được đặt sớm hơn điểm trước nó, trình duyệt coi nó nằm ở vị trí của điểm dừng trước, đó là lý do công cụ này cho phép bạn sắp xếp lại và sắp xếp các điểm dừng.
Quy tắc được viết dưới dạng background: nên dùng được cho mọi phần tử. Gradient được vẽ trên nền, nên chữ đặt lên trên cần chú ý độ tương phản như chữ trên màu đơn sắc: hãy kiểm tra riêng các phần sáng nhất và tối nhất của dải màu.
Mẹo
- Chọn các màu cho điểm dừng hợp nhau bằng Tạo bảng màu.
- Chuyển một điểm dừng giữa HEX, RGB và HSL trong Chuyển đổi màu và kiểm tra độ tương phản.
- Chuẩn bị đưa stylesheet lên? Hãy thu nhỏ nó bằng Thu gọn và làm đẹp CSS.
Câu hỏi thường gặp
Góc trong gradient tuyến tính có nghĩa là gì?
0deg hướng lên trên, nên gradient chạy từ cạnh dưới lên. 90deg chạy từ trái sang phải, 180deg từ trên xuống dưới, và 270deg từ phải sang trái. 360deg cùng hướng với 0deg. Công cụ viết số bạn nhập kèm đơn vị deg.
Làm sao để có cạnh sắc thay vì chuyển màu mượt?
Cho hai điểm dừng liền kề cùng một vị trí. Ví dụ, đỏ ở 50% rồi đến xanh dương ở 50% đổi màu ngay tại điểm giữa mà không pha trộn. Mẫu Sọc cứng cho thấy điều này.
Tùy chọn lặp lại làm gì?
Nó viết repeating-linear-gradient, repeating-radial-gradient hoặc repeating-conic-gradient. Mẫu giữa điểm dừng đầu và điểm dừng cuối được lát lặp lại, nên chỉ hiện khi điểm dừng cuối nằm trước 100%. Hãy thử các điểm dừng ở 0%, 10% và 20% để có sọc.
Dòng màu đơn sắc dự phòng dùng để làm gì?
Trình duyệt không đọc được gradient sẽ bỏ qua dòng đó và giữ dòng trước. Các trình duyệt hỗ trợ gradient, tức gần như tất cả trình duyệt đang dùng, sẽ ghi đè nó. Màu dự phòng là màu của điểm dừng đầu tiên.
Chấp nhận những định dạng màu nào?
Bất cứ thứ gì thuộc tính CSS color chấp nhận trong trình duyệt của bạn: #1636a3, tomato, rgb(22 54 163), hsl(226 76% 36%) hoặc oklch(0.5 0.2 260). Gõ thứ khác sẽ hiện một thông báo và giữ gradient hợp lệ gần nhất trên màn hình.
Gradient hình nón có cần vị trí không?
Nó luôn có một tâm, và công cụ này viết tâm theo phần trăm, nên 50% 50% là giữa khung. Góc bắt đầu xoay vị trí nơi dải màu bắt đầu quét, đo theo chiều kim đồng hồ từ phía trên.