Trình tạo Gradient CSS

Trình tạo Gradient CSS là gì?

Trình tạo Gradient CSS là một công cụ trực tuyến miễn phí dành cho nhà thiết kế web và lập trình viên front-end cần một gradient nhanh mà không phải viết cú pháp bằng tay. Chọn gradient tuyến tính, hướng tâm hoặc nón, đặt góc theo độ cho loại tuyến tính và nón, và xác định các điểm dừng màu, mỗi điểm có một màu HEX và một phần trăm vị trí. Khi bạn chỉnh sửa, bản xem trước trực tiếp hiển thị kết quả và quy tắc CSS background tương ứng cập nhật ngay lập tức để bạn có thể sao chép thẳng vào một stylesheet. Hãy dùng nó để thiết kế nút, nền hero, thẻ và lớp phủ, hoặc để tìm hiểu cách các hàm linear-gradient(), radial-gradient() và conic-gradient() hoạt động.

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

1. Chọn loại gradient: Tuyến tính, Hướng tâm hoặc Nón.
2. Với gradient tuyến tính hoặc nón, đặt góc theo độ (0-360); hướng tâm dùng một hình tròn căn giữa và bỏ qua góc.
3. Chỉnh sửa từng điểm dừng màu: nhập hoặc chọn một màu HEX và đặt vị trí của nó theo phần trăm (0-100).
4. Nhấp Thêm điểm dừng để chèn một màu khác, hoặc biểu tượng thùng rác để xóa một điểm dừng (giữ lại tối thiểu hai điểm dừng).
5. Theo dõi hộp xem trước trực tiếp cập nhật, rồi sao chép quy tắc CSS background đã tạo bằng nút sao chép.

Ví dụ

Tuyến tính, 90deg, #4f86f7 tại 0% và #9333ea tại 100%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%);

Hướng tâm, điểm dừng #ffffff 0%, #4f86f7 50%, #1e3a8a 100%

background: radial-gradient(circle, #ffffff 0%, #4f86f7 50%, #1e3a8a 100%);

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

Những loại gradient nào được hỗ trợ?

Ba loại: linear-gradient (với một góc theo độ), radial-gradient (một hình tròn căn giữa) và conic-gradient (với một góc bắt đầu). Chuyển đổi giữa chúng bằng nút chuyển loại và CSS cập nhật ngay lập tức.

Các điểm dừng màu và vị trí hoạt động như thế nào?

Mỗi điểm dừng có một màu và một phần trăm vị trí từ 0 đến 100. Các điểm dừng được ghi vào CSS theo đúng thứ tự xuất hiện trong danh sách, chính xác như cách trình duyệt diễn giải, nên bạn kiểm soát thứ tự trực tiếp. Bạn có thể thêm điểm dừng bằng Thêm điểm dừng và xóa xuống tối thiểu hai điểm.

Tôi có thể chọn màu trực quan thay vì gõ HEX không?

Có. Nhấp vào chip màu nhỏ bên cạnh mỗi điểm dừng để mở bộ chọn màu gốc của trình duyệt, hoặc gõ một giá trị HEX như #4f86f7 trực tiếp vào trường màu. Bản xem trước và CSS cập nhật khi bạn thay đổi.

Tại sao trường góc biến mất với gradient hướng tâm?

Ở đây gradient hướng tâm được vẽ thành một hình tròn căn giữa, vốn không dùng góc, nên trường góc chỉ hiển thị cho loại tuyến tính và nón, nơi nó thay đổi hướng.

Màu sắc hoặc CSS của tôi có được tải lên đâu đó không?

Không. Gradient được dựng hoàn toàn trong trình duyệt của bạn bằng các phép tính chuỗi và màu cục bộ — không có màu sắc, CSS hay cài đặt nào từng được gửi đến máy chủ, nên nó hoạt động ngoại tuyến và giữ riêng tư công việc của bạn.