🌈

tạo gradient CSS

Tạo gradient CSS tuyến tính và hướng tâm một cách trực quan. Thêm điểm dừng màu, điều chỉnh vị trí, đặt góc và sao chép CSS sẵn dùng chỉ với một cú nhấp.

Công cụ tạo Chạy cục bộ Không gửi dữ liệu
Gradient CSSGradient tuyến tínhGradient hướng tâmĐiểm dừng màu
Loại gradient
Góc
Điểm dừng màu
Xem trước
Đầu ra CSS
background: linear-gradient(135deg, #7c6af7 0%, #06b6d4 100%);

Tạo gradient CSS là gì?

Tạo gradient CSS là công cụ trực quan để tạo gradient tuyến tính và xuyên tâm CSS. Bạn thêm các điểm dừng màu, đặt vị trí của chúng trên thang 0—00%, chọn góc cho gradient tuyến tính và xem kết quả trực tiếp. Thuộc tính CSS cuối cùng đã sẵn sàng để dán vào bất kỳ stylesheet nào.

Cách sử dụng công cụ tạo gradient CSS

  1. Chọn loại gradient tuyến tính hoặc xuyên tâm.
  2. Với gradient tuyến tính, đặt góc bằng thanh trượt.
  3. Chỉnh sửa các điểm dừng màu mặc định bằng cách nhấp vào bộ chọn màu và điều chỉnh vị trí.
  4. Thêm điểm dừng màu bằng nút "Thêm điểm dừng màu" nếu cần.
  5. Nhấp vào "Sao chép CSS" để sao chép thuộc tính gradient vào bộ nhớ tạm.

Công cụ liên quan

🎨
Lấy bảng màu ảnh
Trích xuất bảng màu gọn gồm các màu HEX chủ đạo từ một hình ảnh
 ☀️
Chỉnh độ sáng ảnh
Điều chỉnh độ sáng và độ tương phản của ảnh với xem trước tức thì
 🌓
Ảnh duotone
Ánh xạ vùng tối và vùng sáng của ảnh thành hai màu tùy chỉnh
Cú pháp gradient CSS ▾
Ví dụ
Đầu vào Tuyến tính, 135°, điểm dừng 1: #7c6af7 tại 0%, điểm dừng 2: #06b6d4 tại 100%
Đầu ra background: linear-gradient(135deg, #7c6af7 0%, #06b6d4 100%);
Các trường hợp sử dụng phổ biến
  • Tạo gradient nền cho landing page và thành phần UI
  • Tạo lớp phủ gradient cho các phần hero
  • Tạo mẫu điểm dừng màu cho biểu đồ hoặc dải phân cách
  • Tạo mẫu thử ý tưởng gradient trước khi chuyển sang công cụ thiết kế
Câu hỏi thường gặp
Những loại gradient nào được hỗ trợ?

Gradient tuyến tính với góc tùy chỉnh (0—60°) và gradient hướng tâm (hình tròn) đều được hỗ trợ.

Tôi có thể thêm nhiều hơn hai điểm dừng màu không?

Có. Nhấp vào "Thêm điểm dừng màu" để thêm bao nhiêu điểm dừng tùy ý. Mỗi điểm dừng có màu và vị trí độc lập.

Làm thế nào để điều khiển hướng của gradient tuyến tính?

Dùng thanh trượt Góc. 0° là từ trên xuống dưới, 90° là từ trái sang phải, và 135° chạy theo đường chéo.

Đầu ra có tương thích đa trình duyệt không?

Yes. The tool outputs standard CSS using the linear-gradient() and radial-gradient() functions which are supported by all modern browsers.