Công cụ tạo CSS Gradient

Tạo CSS Gradient là gì?

Trình chỉnh sửa gradient CSS đầy đủ, hỗ trợ linear-gradient, radial-gradient và conic-gradient, các biến thể lặp lại của chúng và nội suy màu hiện đại (in oklab / in oklch). Điểm dừng màu có thể kéo trên thanh hoặc gõ chính xác, và màu nhận hex, rgb(), hsl() hoặc oklch().

Cách sử dụng Tạo CSS Gradient

1. Chọn một mẫu có sẵn hoặc một Kiểu: Tuyến tính, Tỏa tròn hoặc Hình nón.
2. Đặt Góc (tuyến tính), Góc bắt đầu (hình nón) hoặc Hình dạng, Kích thước và vị trí tâm (tỏa tròn/hình nón).
3. Chỉnh Điểm dừng màu: bấm vào thanh để thêm điểm dừng, kéo tay nắm để di chuyển, hoặc gõ màu và vị trí cho từng điểm.
4. Tùy chọn đánh dấu Gradient lặp lại và chọn Không gian màu nội suy (OKLab hoặc OKLCH).
5. Sao chép mã CSS.

Ví dụ

Tuyến tính, góc 45°, điểm dừng #00c9ff tại 0% và oklch(70% 0.2 150) tại 80%, nội suy OKLCH

background: linear-gradient(45deg, #00c9ff 0%, oklch(70% 0.2 150) 80%);
background: linear-gradient(in oklch 45deg, #00c9ff 0%, oklch(70% 0.2 150) 80%);

Khi nào nên dùng Tạo CSS Gradient

Dùng cho nền, nút, phần banner và các dải sọc hay vòng màu tạo từ gradient. Với nền "mesh" mềm nhiều điểm, hãy dùng công cụ tạo Mesh Gradient; với hiệu ứng kiểu ảnh chụp trên hình, hãy dùng CSS filter.

Tạo CSS Gradient hoạt động như thế nào

Các điểm dừng được sắp theo vị trí và viết dạng color position%. Gradient tuyến tính dùng góc tính bằng độ, gradient tỏa tròn dùng shape [size] at x% y%, gradient hình nón dùng from angle at x% y%. Bấm vào thanh sẽ chèn một điểm dừng có màu nội suy từ hai điểm lân cận. Khi chọn không gian nội suy, công cụ xuất hai khai báo: trước là bản dự phòng sRGB thường, sau là cùng gradient với in oklch (hoặc in oklab), nhờ đó trình duyệt cũ vẫn có gradient hoạt động còn trình duyệt hiện đại dùng cách pha màu mượt hơn theo cảm nhận.

Các Trường Hợp Sử Dụng Phổ Biến

• ✓ Nền banner và các phần của trang
• ✓ Nút và huy hiệu gradient
• ✓ Vòng màu và hình kiểu biểu đồ tròn bằng gradient hình nón
• ✓ Nền sọc bằng gradient lặp lại
• ✓ Gradient OKLCH mượt, tránh vùng giữa xám xịt khi pha sRGB

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

Bước tiếp theo nên làm

Khám phá thêm danh mục