Trình tạo Gradient
Tạo CSS gradient, xem trước màu và sao chép mã linear-gradient cho nền hoặc nút.
Mục đích tìm kiếm
Tạo gradient CSS cho UI và landing page
Tạo mã gradient CSS cho background, nút, và section, rồi sao chép trực tiếp vào stylesheet.
Dùng trình tạo để điều chỉnh linear/radial, color stop, góc và hướng rồi so sánh xem trước trực tiếp trước khi xuất.
Sao chép giá trị `linear-gradient(...)` hoặc `radial-gradient(...)` đã tạo rồi dán ngay vào `background`/`background-image`.
Trường hợp dùng điển hình
Hero trang đích, điểm nhấn card, nền nút, banner và khu vực thương hiệu nơi chuyển màu có kiểm soát giúp cải thiện hệ thống trực quan.
Kết hợp màu và góc
Cân bằng màu thương hiệu với điểm dừng và hướng (ví dụ `to right`, `90deg`, `to bottom right`) để phù hợp độ đọc và tone.
Kiểm tra sau dán
Sau khi dán, kiểm tra độ tương phản văn bản, tính đồng nhất màu thương hiệu và hiển thị trên trình duyệt chính.
Công cụ tập trung vào tạo CSS nhanh và copy; hãy xác thực độ tương phản khả dụng và hiển thị đa trình duyệt sau khi áp dụng.
Trình tạo Gradient Khu vực tạo gradient
Cách sử dụng
- 1 Chọn gradient tuyến tính hoặc tỏa tròn và điều chỉnh góc nếu cần.
- 2 Thêm điểm màu hoặc đổi màu và vị trí trong khi xem trước kết quả.
- 3 Sao chép mã CSS gradient đã tạo vào stylesheet.
Trường hợp sử dụng phổ biến
- Tạo CSS linear-gradient
- Tạo nền gradient CSS
- Chỉnh vị trí điểm màu
Câu hỏi thường gặp
Tôi có thể tạo loại gradient nào?
Bạn có thể tạo linear-gradient và radial-gradient. Với linear-gradient, công cụ cho phép chỉnh góc hướng.
Có thể thêm hoặc sửa điểm màu không?
Có. Bạn có thể chỉnh màu, vị trí, thêm hoặc xóa điểm màu; bản xem trước và CSS sẽ cập nhật ngay.
Mã CSS tạo ra dùng như thế nào?
Kết quả hiển thị dưới dạng thuộc tính background. Dùng nút sao chép để dán vào stylesheet của bạn.