⭐ 0
🔍
văn bản Hình ảnh PDF & Tài liệu Âm thanh Âm nhạc Điện tử Thời gian Tiện ích Trình xác nhận Huyền học Trò chơi

Trình tạo gradient tuyến tính 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ả

Trang này mở trình tạo gradient với loại tuyến tính đã được chọn. Kéo thanh trượt góc để xoay độ mờ, điều chỉnh các điểm dừng màu và xem trước toàn chiều rộng cộng với cập nhật dòng CSS trên mỗi đầu vào.

Linear-gradient() vẽ màu dọc theo một đường thẳng - gradient được sử dụng nhiều nhất trong CSS cho đến nay. 90 độ chạy từ trái sang phải, 180 độ từ trên xuống dưới và bất kỳ góc nào ở giữa đều tạo thành đường chéo; vị trí dừng theo phần trăm quyết định nơi mỗi dải màu bắt đầu hòa trộn với dải màu tiếp theo.

Khi bản xem trước trông ổn, hãy sao chép dòng nền vào biểu định kiểu của bạn. Nếu bạn muốn một điểm bắt đầu thay vì một bảng trống, các trang cài sẵn về hoàng hôn, đại dương và màu phấn sẽ mở cùng công cụ này với các cặp màu đã được kiểm chứng đã được tải sẵn.

🛡️
Thực hiện trong trình duyệt

Các tập tin và dữ liệu đầu vào của bạn sẽ không bao giờ rời khỏi thiết bị này. Quá trình xử lý chạy hoàn toàn ngoại tuyến. An toàn 100%.

Định dạng và quy tắc được chấp nhận

  • Chọn loại chuyển màu (tuyến tính, xuyên tâm, hình nón) với thanh trượt góc cho chế độ tuyến tính và hình nón.
  • Danh sách dừng màu: hai điểm dừng để bắt đầu, thêm hoặc xóa tối đa sáu điểm dừng, mỗi điểm dừng có bộ chọn màu riêng và vị trí theo phần trăm.
  • Dòng CSS nền có thể sao chép cùng với các trang cài sẵn được tạo sẵn cho độ dốc màu hoàng hôn, đại dương và màu phấn.

Lợi ích chính

✓ Bản xem trước toàn chiều rộng sẽ vẽ lại sau mỗi thay đổi — loại, góc và từng điểm dừng màu — vì vậy CSS bạn sao chép chính xác như những gì bạn đã thấy.
✓ Tối đa sáu điểm dừng màu với các vị trí riêng lẻ bao gồm mọi thứ từ độ mờ hai màu đơn giản đến nền nhiều dải phức tạp.
✓ Một khai báo, ba động cơ: chuyển đổi giữa tuyến tính, hướng tâm và hình nón mà không cần xây dựng lại điểm dừng của bạn.

Trường hợp sử dụng

  • • Soạn nền cho phần anh hùng bằng cách kéo góc và các điểm dừng màu thay vì chỉnh sửa bằng tay tuyến tính-gradient() và tải lại.
  • • So sánh các điểm dừng màu giống nhau dưới dạng chuyển màu tuyến tính, hướng tâm và hình nón bằng một công tắc - các điểm dừng chuyển tiếp giữa các loại.
  • • Lấy một sự kết hợp đã được chứng minh từ trang đặt trước về hoàng hôn, đại dương hoặc màu phấn và điều chỉnh nó thành màu sắc thương hiệu của bạn.