---

CSS Gradient là gì?

CSS gradient cho phép hiển thị các chuyển đổi mượt mà giữa hai màu trở lên mà không cần dùng file hình ảnh. Có ba loại: linear-gradient (theo đường thẳng), radial-gradient (tỏa ra từ điểm trung tâm) và conic-gradient (quét xung quanh điểm trung tâm). Gradient được dùng cho nền, nút, lớp phủ và các phần tử trang trí.

Cách sử dụng Trình tạo CSS Gradient

1. Chọn cài đặt sẵn từ các mẫu màu hoặc tự cấu hình gradient.

2. Chọn loại gradient: linear, radial hoặc conic.

3. Điều chỉnh góc (cho linear/conic) hoặc hình dạng (cho radial).

4. Chỉnh sửa các điểm dừng màu — thay đổi màu và vị trí (0–100%).

5. Thêm hoặc xóa điểm dừng màu theo nhu cầu.

6. Sao chép CSS và dán vào stylesheet của bạn.

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

Làm cách nào để tạo gradient trong suốt? Sử dụng các giá trị màu rgba() hoặc hsla() với kênh alpha bằng 0 để có độ trong suốt hoàn toàn. Ví dụ: một điểm dừng màu rgba(0,0,0,0) là màu đen hoàn toàn trong suốt, hữu ích cho các lớp phủ mờ dần trên hình ảnh.

Làm cách nào để tạo điểm dừng màu cứng (không chuyển tiếp)? Đặt hai điểm dừng màu ở cùng một vị trí — một kết thúc và một bắt đầu ở điểm đó. Ví dụ: đỏ 50%, xanh 50% tạo ra một chuyển đổi tức thì từ đỏ sang xanh ở điểm giữa mà không có chuyển tiếp gradient.

Những trình duyệt nào hỗ trợ gradients hình nón? Gradients hình nón được hỗ trợ trong tất cả các trình duyệt hiện đại (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). Chúng không được hỗ trợ trong Internet Explorer.

Tôi có thể sử dụng nhiều gradients trên cùng một phần tử không? Có. Nền CSS chấp nhận danh sách các lớp được phân tách bằng dấu phẩy. Bạn có thể xếp chồng các gradients, kết hợp chúng với hình ảnh nền và kiểm soát vị trí và kích thước của từng lớp một cách độc lập.

Keywords: trình tạo CSS gradient, gradient tuyến tính, gradient hướng tâm, gradient hình nón, trình tạo nền CSS, bộ chọn màu gradient, công cụ CSS gradient