ToolsMaxxing

Tạo gradient CSS

Thiết kế gradient tuyến tính, tròn hoặc hình nón rồi sao chép mã CSS.

Điểm màu
0%
100%

Tệp của bạn ở lại trên thiết bị

Cách dùng

  1. 1Chọn tuyến tính, tròn hoặc hình nón.
  2. 2Đặt góc, hoặc hình dạng cho gradient tròn.
  3. 3Chọn màu và kéo từng điểm đến vị trí của nó. Thêm điểm bằng Thêm điểm màu.
  4. 4Sao chép CSS và dán vào stylesheet của bạn.

Các tùy chọn có tác dụng gì

Tuyến tính
Màu hòa dần theo một đường thẳng. Góc đặt hướng: 0 độ đi lên, 90 sang phải, 180 đi xuống.
Tròn
Màu lan ra từ tâm, dạng hình tròn hoặc hình elip.
Hình nón
Màu quét quanh tâm như bánh xe màu hoặc biểu đồ tròn. Góc xoay điểm bắt đầu.
Điểm màu
Mỗi điểm là một màu tại vị trí từ 0 đến 100 phần trăm. Tối đa tám điểm.

Quyền riêng tư

Mọi thứ chạy ngay trong trình duyệt. Không có gì bạn gõ được gửi đến máy chủ.

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

Trình duyệt nào hỗ trợ các gradient này?

Gradient tuyến tính và tròn chạy trên mọi trình duyệt hiện nay. Gradient hình nón chạy trên mọi phiên bản hiện nay của Chrome, Edge, Firefox và Safari.

Làm sao tạo viền cứng thay vì hòa màu?

Đặt hai điểm ở cùng một vị trí, ví dụ đỏ ở 50% và xanh dương ở 50%. Giữa chúng không có khoảng hòa màu, nên chuyển màu rất sắc nét.

Tôi có thể dùng làm màu chữ hoặc viền không?

Có. Dùng cùng giá trị trong background-image, kèm background-clip: text cho chữ, hoặc border-image cho viền.

Sao trang hiển thị màu khác với màu tôi chọn?

Bộ chọn màu dùng giá trị hex sRGB. Màn hình có dải màu rộng có thể hiển thị hơi khác, nhưng giá trị CSS thì chính xác.

Làm sao thêm độ trong suốt?

Công cụ này xuất màu hex đặc. Hãy sửa mã và đổi một màu thành hex tám chữ số như #4f46e580, hoặc rgba().

Công cụ liên quan