Trình tạo CSS Gradient – Linear, Radial & Conic Gradient

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

1Chọn loại gradient — Linear, Radial hoặc Conic — hoặc bắt đầu từ một mẫu có sẵn.

2Chọn màu cho các điểm màu và kéo thanh trượt để đặt vị trí cho từng màu.

3Thiết lập góc (hoặc hình dạng cho radial gradient) và thêm tối đa 8 điểm màu.

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

Tạo CSS gradient trực quan

Dải màu (gradient) giúp tạo chiều sâu và màu sắc cho nút bấm, phần hero, thẻ và hình nền mà không cần dùng đến file ảnh. Tuy nhiên, nếu viết code thủ công, bạn sẽ phải tự nhẩm tính góc độ, tỷ lệ phần trăm và tải lại trang liên tục. Công cụ tạo CSS gradient này giúp bạn thiết kế trực quan với bản xem trước trực tiếp, đồng thời tạo ra mã CSS chuẩn, sẵn sàng sao chép và tương thích với mọi trình duyệt hiện đại.

Tính năng

Ba loại gradient: linear (tuyến tính), radial (tỏa tròn hoặc bầu dục) và conic (hình nón).
Tối đa 8 điểm màu (color stop) có thể kéo thả để đổi vị trí.
Thanh trượt chỉnh góc cho linear và conic gradient.
Các mẫu có sẵn và nút ngẫu nhiên giúp bạn nhanh chóng có thêm ý tưởng.
Màu nền dự phòng (fallback) được tích hợp sẵn trong mã CSS.
Sao chép mã chỉ với một cú nhấp chuột.

Cách sử dụng mã CSS

Dán mã vào phần tử bạn muốn tạo kiểu:

.hero {
  background: #0ea5e9;
  background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
}

Trong CSS, gradient được xử lý như hình ảnh, do đó bạn cũng có thể dùng chúng trong background-image, xếp chồng nhiều gradient lên nhau (cách nhau bằng dấu phẩy), hoặc kết hợp với hình ảnh: background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(photo.jpg); giúp làm tối ảnh nền để chữ màu trắng bên trên dễ đọc hơn.

Mẹo thiết kế

Giữ sự tinh tế. Hai tông màu liền kề (xanh lam sang tím, cam sang hồng) trông sẽ mượt mà và hiện đại hơn so với các màu đối lập.
Kiểm tra độ tương phản. Nếu văn bản nằm trên nền gradient, hãy đảm bảo chữ dễ đọc ở cả hai đầu — kiểm tra màu sắc bằng công cụ Chuyển đổi mã màu để xem tỷ lệ tương phản.
Lấy màu từ ảnh thương hiệu bằng công cụ Lấy mã màu từ ảnh.
Tạo chiều sâu cho các thẻ và nút bấm bằng công cụ Tạo đổ bóng.

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

Tại sao có hai dòng background trong CSS?

Dòng đầu tiên thiết lập màu nền dự phòng (fallback) cho các trình duyệt hoặc ứng dụng email cũ không hỗ trợ gradient. Các trình duyệt hỗ trợ gradient sẽ dùng dòng thứ hai để ghi đè lên dòng đầu.

Các góc trong linear gradient có ý nghĩa gì?

0° chạy từ dưới lên trên, 90° từ trái sang phải, 180° từ trên xuống dưới và 270° từ phải sang trái. Các góc ở giữa sẽ chạy chéo — 135° đi từ góc trên bên trái xuống góc dưới bên phải.

Sự khác biệt giữa linear, radial và conic gradient là gì?

Linear gradient chuyển màu theo một đường thẳng. Radial gradient tỏa ra từ tâm theo hình tròn hoặc elip. Conic gradient xoay quanh tâm giống như vòng thuần sắc (color wheel) hoặc biểu đồ tròn.

Tôi có cần dùng vendor prefix như -webkit- không?

Không. Linear và radial gradient hoạt động trên mọi trình duyệt hiện nay mà không cần prefix, còn conic gradient được hỗ trợ trên tất cả các trình duyệt hiện đại ra mắt từ năm 2020.

Làm cách nào để tạo đường phân cách sắc nét thay vì chuyển màu mượt mà?

Đặt hai điểm dừng (stop) ở cùng một vị trí với các màu khác nhau. Ví dụ: màu đỏ ở 50% và màu xanh dương ở 50% sẽ tạo ra một đường cắt sắc nét ở chính giữa.