CanDoYa
VI

Tạo Gradient CSS Miễn Phí

Chạy hoàn toàn trên trình duyệt của bạn - không tải lên, không cần đăng ký.

Loại
Điểm dừng màu
Mã CSS
Chia sẻ công cụ này

Tạo gradient CSS là gì?

Đây là công cụ trực quan giúp bạn tạo đoạn mã linear-gradient(), radial-gradient() hoặc conic-gradient() mà không cần gõ tay. Chọn màu, kéo các điểm dừng, chỉnh góc nghiêng, rồi sao chép đoạn CSS sẵn sàng dán trong khi phần xem trước hiển thị chính xác những gì trình duyệt sẽ vẽ. Mọi thứ chạy ngay trong trình duyệt của bạn.

Cách dùng

  1. 1Chọn loại gradient. Chọn linear, radial hoặc conic. Linear hiện thanh trượt góc; radial thêm tùy chọn hình dạng (tròn hoặc elip) và vị trí; conic có góc bắt đầu và vị trí.
  2. 2Thiết lập các điểm dừng màu. Nhấp vào từng ô màu để chọn màu và kéo thanh trượt để di chuyển điểm dừng dọc theo gradient. Thêm tối đa 8 điểm dừng, hoặc bớt xuống còn 2.
  3. 3Chỉnh hướng gradient. Kéo thanh trượt góc (0-360 độ) hoặc chọn một từ khóa vị trí. Phần xem trước cập nhật ngay lập tức mỗi khi bạn thay đổi.
  4. 4Sao chép đoạn CSS. Nhấn Sao chép để lấy toàn bộ khai báo background, bao gồm cả dòng màu đặc dự phòng, rồi dán vào tệp CSS của bạn.

Dành cho ai

Viết cú pháp gradient bằng tay khá rắc rối: góc nghiêng, thứ tự điểm dừng và vị trí phần trăm đều ảnh hưởng lẫn nhau, chỉ một lỗi gõ nhỏ cũng âm thầm phá hỏng toàn bộ khai báo background. Công cụ này giữ cho phần xem trước và đoạn mã luôn khớp nhau - những gì bạn thấy chính là đoạn CSS bạn sao chép, không sai một ký tự. Mọi thứ xử lý hoàn toàn phía trình duyệt, nên không có gì bạn thiết kế bị tải lên đâu cả.

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

Công cụ tạo gradient CSS này có miễn phí không?

Có - miễn phí hoàn toàn, không cần đăng ký, không watermark, không giới hạn. Tạo bao nhiêu gradient tùy thích và sao chép thẳng đoạn CSS vào dự án của bạn.

Dữ liệu có được tải lên máy chủ nào không?

Không. Gradient được tạo và xem trước hoàn toàn trong trình duyệt của bạn bằng JavaScript thuần. Không có màu sắc, mã nguồn hay dữ liệu sử dụng nào được gửi đi đâu cả.

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

Gradient linear pha trộn màu dọc theo một đường thẳng theo góc bạn chọn. Gradient radial tỏa ra từ một điểm trung tâm theo hình tròn hoặc elip. Gradient conic quét màu quanh một điểm trung tâm, giống như bánh xe màu hoặc biểu đồ tròn.

Điểm dừng màu trong gradient CSS hoạt động thế nào?

Mỗi điểm dừng gắn một màu với một vị trí từ 0% đến 100% dọc theo đường gradient. Trình duyệt pha trộn mượt mà giữa các điểm dừng liền kề. Đặt hai điểm dừng cùng một vị trí sẽ tạo ra một mép chuyển màu sắc nét thay vì hòa trộn - hữu ích cho hiệu ứng sọc hoặc biểu đồ tròn.

Những trình duyệt nào hỗ trợ các gradient này?

Tất cả trình duyệt hiện đại - Chrome, Firefox, Safari và Edge - đều hỗ trợ linear-gradient() và radial-gradient() không cần tiền tố; conic-gradient() đã được hỗ trợ khắp nơi từ năm 2020. Đoạn mã sao chép cũng kèm sẵn màu đặc dự phòng cho các trình duyệt cũ hơn.

Tôi có thể dùng gradient này làm màu chữ không?

Không thể áp dụng trực tiếp - gradient là hình ảnh, không phải màu sắc. Hãy đặt gradient làm background-image cho phần tử chứa chữ, sau đó thêm background-clip: text và color: transparent để gradient hiện lên xuyên qua từng ký tự.

Tại sao gradient của tôi bị xuất hiện vệt sọc?

Hiện tượng vệt sọc xảy ra khi hai điểm dừng ở xa nhau pha trộn qua một khoảng màu gần giống nhau trên quãng dài, làm lộ ra các bậc màu 8-bit. Bạn có thể giảm bớt bằng cách thêm một điểm dừng màu ở giữa, rút ngắn khoảng cách pha trộn, hoặc chọn các màu khác nhau cả về độ sáng lẫn tông màu.