Trình Tạo Gradient CSS

Công Cụ Này Là Gì?

Gradient CSS là hình ảnh do trình duyệt tạo ra từ một danh sách màu, chứ không phải tệp bạn tải lên — linear-gradient() chuyển màu dọc theo một đường thẳng ở góc cho trước, trong khi radial-gradient() chuyển màu ra ngoài từ một điểm trung tâm. Cả hai đều nhận từ hai điểm màu trở lên, mỗi điểm có thể được gắn tùy chọn vào một vị trí dọc theo gradient.

Viết tay, gradient rất dễ sai một cách tinh vi: sai thứ tự điểm, thiếu phần trăm, hoặc giá trị góc sai hướng (góc CSS chạy theo chiều kim đồng hồ từ 'to top', khác với góc toán học). Công cụ này loại bỏ cú pháp khỏi đường đi của bạn — đặt màu sắc và vị trí bằng bộ chọn và thanh trượt, xem khung xem trước cập nhật theo thời gian thực, và sao chép mã CSS kết quả khi nó trông vừa ý.

Nguồn: CSS Images Module Level 3, W3C — đặc tả định nghĩa cú pháp linear-gradient() và radial-gradient().

Tại Sao Nên Dùng?

• Xem trước trực tiếp cập nhật ngay lập tức với mỗi thay đổi màu sắc, vị trí và góc — không cần tải lại trang để xem kết quả.
• Chuyển đổi giữa gradient tuyến tính và xuyên tâm chỉ với một cú nhấp; điều khiển góc tự động ẩn đi với gradient xuyên tâm, nơi nó không áp dụng.
• Thêm hoặc bớt điểm màu (từ 2 đến 4) thay vì bị giới hạn ở gradient hai màu cố định.
• Mỗi điểm có thanh trượt vị trí riêng, nên các điểm không cần cách đều nhau.
• Xuất mã CSS sẵn sàng dán, sử dụng cú pháp chuẩn linear-gradient()/radial-gradient().
• Chạy hoàn toàn trong trình duyệt của bạn — không có gì bạn cấu hình được tải lên bất cứ đâu. Miễn phí, không cần đăng ký, hoạt động tốt trên điện thoại.

Cách Sử Dụng

1. Chọn Tuyến tính hoặc Xuyên tâm làm kiểu gradient.
2. Với gradient tuyến tính, kéo thanh trượt góc — 90deg chạy từ trái sang phải, 180deg từ trên xuống dưới, và tiếp tục như vậy.
3. Đặt màu và vị trí cho mỗi điểm; điểm đầu tiên là màu bắt đầu của gradient, điểm cuối cùng là màu kết thúc.
4. Nhấp '+ Thêm điểm' để thêm tối đa 4 điểm cho gradient nhiều màu, hoặc nút ✕ để xóa bớt một điểm (tối thiểu 2).
5. Sao chép mã CSS được tạo ra và dán vào khai báo background hoặc background-image.

Ví dụ

Đầu vào

Linear · Angle: 90deg · Stops: #f97316 at 0%, #ec4899 at 100%

Đầu ra

background: linear-gradient(90deg, #f97316 0%, #ec4899 100%);

Một gradient từ trái sang phải, từ cam sang hồng — kiểu phổ biến cho nút, banner và nền hero.

Gradient tuyến tính so với xuyên tâm

Gradient tuyến tính chuyển màu dọc theo một đường thẳng, được điều khiển bởi một góc — hữu ích cho banner, nút và nền có hướng. Gradient xuyên tâm chuyển màu ra ngoài từ một điểm trung tâm theo các vòng mở rộng, phù hợp với hiệu ứng đèn chiếu, huy hiệu, hoặc nền dạng phát sáng. Công cụ này mặc định đặt gradient xuyên tâm theo hình tròn ở giữa khung, bao phủ trường hợp sử dụng xuyên tâm phổ biến nhất; CSS cũng hỗ trợ hình elip và vị trí lệch tâm nếu bạn cần chỉnh sửa thêm kết quả bằng tay.

Các mẫu gradient phổ biến

• Điểm nhấn thương hiệu tinh tế: hai sắc độ gần nhau (ví dụ hai tông của cùng một màu) ở góc nông để tạo nền mờ nhẹ.
• Nút CTA tương phản cao: hai màu bão hòa, bổ sung cho nhau ở 90deg hoặc 135deg để tạo vẻ ngoài táo bạo, thu hút nhấp chuột.
• Lớp phủ trên ảnh: gradient từ trong suốt đến màu đặc (đặt độ trong suốt qua màu rgba trong mã hex bên dưới bộ chọn, hoặc chỉnh sau khi sao chép) đặt chồng lên background-image.
• Gradient cầu vồng/thương hiệu nhiều điểm: 3–4 điểm trải đều trên toàn khoảng 0–100%, cho các chuyển tiếp mượt hơn, dần dần hơn so với gradient hai màu.
• Đèn chiếu xuyên tâm: một điểm trung tâm sáng gần 0% mờ dần ra điểm biên tối hơn gần 100%, hữu ích cho các phần hero hoặc điểm nhấn thẻ.

Kết hợp với các công cụ CSS khác

Gradient thường được kết hợp với góc bo tròn và bóng đổ trên cùng một phần tử — một thẻ có gradient với box-shadow mềm và góc bo tròn là một mẫu giao diện phổ biến. Tạo từng phần riêng biệt rồi kết hợp các khai báo CSS trên phần tử đó.

→ Trình Tạo Box Shadow · Trình Tạo Border Radius · Bảng Chọn Màu

Câu Hỏi Thường Gặp