Trình tạo CSS Gradient

Cách sử dụng

1. Chọn kiểu tuyến tính, xuyên tâm hoặc hình nón, sau đó đặt góc hoặc vị trí tâm.
2. Đặt màu, độ mờ và vị trí cho từng điểm dừng. Thêm tối đa sáu điểm dừng hoặc xóa những điểm không cần dùng.
3. Kiểm tra bản xem trước, rồi sao chép dòng CSS vào stylesheet.

Cách hoạt động

Kết quả là một khai báo CSS background tiêu chuẩn. Gradient tuyến tính chạy theo một góc: 0deg đi từ dưới lên trên, 90deg từ trái sang phải, 180deg từ trên xuống dưới. Gradient xuyên tâm lan từ một điểm giữa theo hình tròn hoặc hình elip vừa với khung. Gradient hình nón xoay quanh một điểm giữa, bắt đầu từ góc đã chọn; kiểu này hữu ích để tạo hiệu ứng dạng biểu đồ tròn và bánh xe màu.

Các điểm dừng được viết theo thứ tự vị trí, vì vậy bạn có thể tự do kéo chúng đến vị trí khác. Điểm dừng có độ mờ thấp hơn được viết dưới dạng rgba(), cho phép nền phía sau hiển thị xuyên qua. Hai điểm dừng ở cùng một vị trí tạo thành ranh giới sắc nét thay vì hòa trộn, đây là cách tạo các sọc.

Cả ba hàm gradient đều hoạt động trên mọi trình duyệt hiện tại. Theo mặc định, gradient hòa trộn trong không gian màu sRGB, nên vùng chuyển tiếp giữa các màu bổ sung (chẳng hạn xanh dương và vàng) có thể trông hơi xám; thêm một điểm dừng ở giữa với màu sáng hơn sẽ khắc phục điều này.

Ví dụ

Câu hỏi thường gặp

Quyền riêng tư

Mọi thao tác tạo đều diễn ra trong trình duyệt của bạn. Màu sắc và cài đặt không được gửi đi hoặc lưu trữ.