Chuyển đổi miễn phí

Độ dốc CSS Máy phát điện

Tạo độ dốc CSS một cách trực quan với bản xem trước trực tiếp. Tạo các gradient tuyến tính, xuyên tâm và hình nón với các điểm dừng màu tùy chỉnh - miễn phí và phía máy khách.

Xem trước trực tiếp
Đầu ra CSS
.element {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}
Gradient Type
Góc (90deg)
90°180°270°360°
Color Stops
#6366f10%
#ec4899100%

Về công cụ này

Tạo các gradient tuyến tính và xuyên tâm CSS đẹp mắt bằng trình chỉnh sửa trực quan. Chọn màu sắc, điều chỉnh điểm dừng, thay đổi hướng hoặc góc và xem bản cập nhật xem trước trực tiếp trong thời gian thực. Sao chép mã CSS đã tạo — bao gồm tiền tố của nhà cung cấp cho các trình duyệt cũ hơn — và dán trực tiếp vào biểu định kiểu của bạn.

Cách sử dụng

  1. Chọn loại gradient: tuyến tính hoặc xuyên tâm.
  2. Thêm các điểm dừng màu bằng cách nhấp vào thanh chuyển màu và chọn màu.
  3. Điều chỉnh góc chuyển màu (tuyến tính) hoặc vị trí (bán kính) bằng các điều khiển.
  4. Sao chép mã CSS được tạo từ bảng đầu ra.

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

Độ dốc CSS có hoạt động trong tất cả các trình duyệt không?
Độ dốc CSS hiện đại (độ dốc tuyến tính, độ dốc xuyên tâm) được hỗ trợ trong tất cả các trình duyệt hiện tại bao gồm Chrome, Firefox, Safari và Edge. Công cụ này có thể tùy chọn tạo tiền tố -webkit- cho các phiên bản trình duyệt cũ hơn.
Tôi có thể tạo gradient nhiều màu không?
Đúng. Thêm bao nhiêu điểm dừng màu tùy thích. Bạn cũng có thể điều chỉnh vị trí của từng điểm dừng để kiểm soát nơi màu sắc hòa trộn. Điều này cho phép tạo ra các chuyển màu cầu vồng, hoàng hôn hoặc tùy chỉnh thương hiệu phức tạp.
Sự khác biệt giữa gradient tuyến tính và xuyên tâm là gì?
Chuyển màu tuyến tính chuyển màu dọc theo một đường thẳng (từ trên xuống dưới, từ trái sang phải, đường chéo hoặc bất kỳ góc nào). Độ dốc xuyên tâm chuyển màu ra bên ngoài từ điểm trung tâm theo hình tròn hoặc hình elip.
Tôi có thể sử dụng gradient làm nền cho văn bản không?
Đúng. Sử dụng Background-clip: text với -webkit-text-fill-color: Transparent để áp dụng gradient cho văn bản. CSS được tạo cung cấp định nghĩa độ dốc - kết hợp nó với các thuộc tính này cho văn bản chuyển màu.