0

Trình tạo độ dốc CSS

Xây dựng các gradient CSS một cách trực quan: kiểu tuyến tính, hướng tâm hoặc hình nón, thanh trượt góc và tối đa sáu điểm dừng màu với bản xem trước toàn chiều rộng trực tiếp và mã có thể sao chép.

90°
Đang xử lý... 0%

kết quả

Viết tuyến tính-gradient(135deg, #2193b0 0%, #6dd5ed 100%) bằng tay và tải lại trang để thấy đó là một vòng lặp chậm. Trình tạo này sẽ đóng nó: chọn tuyến tính, hướng tâm hoặc hình nón, kéo thanh trượt góc, đặt từng điểm dừng màu bằng bộ chọn màu gốc và vị trí phần trăm — và bản xem trước toàn chiều rộng sẽ vẽ lại trên mỗi đầu vào, với đường nền hoàn thiện luôn sẵn sàng sao chép.

Ba loại gradient bao gồm các công việc khác nhau. Độ dốc tuyến tính mờ dần theo một hướng và mang hầu hết các phần và nút chính; độ dốc xuyên tâm tỏa ra từ trung tâm để tạo ra ánh sáng và họa tiết; độ dốc hình nón quét quanh tâm, biểu đồ hình tròn lũy thừa và bánh xe màu. Bạn có thể chuyển đổi loại bất kỳ lúc nào - điểm dừng của bạn sẽ được chuyển tiếp, vì vậy việc so sánh ba điểm này chỉ mất vài giây.

Tối đa sáu điểm dừng màu cung cấp cho bạn không gian cho các thiết kế nhiều dải màu và các trang cài sẵn cung cấp các kết hợp đã được chứng minh — hoàng hôn ấm áp, đại dương tĩnh lặng và cặp màu phấn nhẹ nhàng — là điểm bắt đầu mà bạn có thể điều chỉnh thay vì các bức vẽ trống. Lưu ý sự phân công lao động: trình tạo bảng màu trên trang web này chọn các màu phẳng hài hòa và trình chuyển đổi định dạng màu sẽ chuyển một giá trị giữa HEX, RGB và HSL, trong khi công cụ này thực hiện một công việc khác - nó biến các màu đã chọn thành mã chuyển màu CSS sẵn sàng.

Mọi thứ đều chạy cục bộ trong trình duyệt của bạn: không tải lên, không cần tài khoản, không cần truy cập khứ hồi từ máy chủ và trình tạo tiếp tục hoạt động ngoại tuyến sau khi được tải.