YUCTS Tools
Tiếng ViệtNgôn ngữ

Tạo dải màu CSS (tuyến tính và tỏa tròn)

Chỉnh các điểm màu và góc của dải màu tuyến tính hoặc tỏa tròn, xem trước trực tiếp và sao chép mã CSS background.

  • Xử lý trên trình duyệt (không tải lên)
Kiểu chuyển màu

0deg chuyển từ dưới lên trên, 90deg từ trái sang phải, 180deg từ trên xuống dưới (0–360).

Điểm màu (color stop)

Có thể đặt từ 2 đến 10 điểm màu. CSS liệt kê chúng theo vị trí từ nhỏ đến lớn.

  1. Điểm màu 1

  2. Điểm màu 2

  3. Điểm màu 3

Kết quả

Xem trước

CSS đã tạo

background: #4158d0;
background: linear-gradient(90deg, #4158d0 0%, #c850c0 46%, #ffcc70 100%);

Cách sử dụng

  1. Chọn tuyến tính hoặc tỏa tròn, rồi đặt góc, hoặc hình dạng và vị trí tâm.
  2. Chỉnh màu (#RRGGBB…) và vị trí (0–100%) của từng điểm màu. Nhấn "Thêm điểm màu" để thêm và × để xóa.
  3. Kiểm tra phần xem trước rồi nhấn "Sao chép CSS" để dán vào tệp CSS của bạn.

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

0deg và 90deg hướng về đâu?

Trong linear-gradient của CSS, 0deg chạy từ dưới lên trên (to top), 90deg từ trái sang phải (to right) và 180deg từ trên xuống dưới (to bottom).

Nếu hai điểm màu cùng một vị trí thì sao?

Màu sẽ đổi đột ngột tại vị trí đó thay vì chuyển dần, hữu ích khi tạo sọc.

Vì sao có hai dòng background?

Dòng đầu là màu đặc dự phòng (fallback), để màu đầu tiên vẫn hiển thị ở nơi không hỗ trợ gradient.

Có dùng được tên màu như red hoặc rgb() không?

Vì lý do an toàn, công cụ chỉ nhận mã màu thập lục phân (#RGB, #RGBA, #RRGGBB, #RRGGBBAA); mọi văn bản khác đều không được ghi vào CSS.

Lưu ý & giới hạn

  • Nội dung bạn nhập chỉ được xử lý trên trang này và không gửi đến máy chủ của YUCTS.
  • Chỉ hỗ trợ mã màu thập lục phân. Không dùng được tên màu, rgb(), hsl() hay từ khóa như transparent (để làm trong suốt, hãy dùng hai chữ số cuối của #RRGGBBAA).
  • Không hỗ trợ dải màu hình nón (conic-gradient), dải màu lặp (repeating-) và tùy chọn nội suy màu.
  • Phần xem trước là cách trình duyệt của bạn hiển thị; trình duyệt cũ có thể không hiển thị màu 8 chữ số (#RRGGBBAA).