Trình tạo gradient CSS

Pha từ hai đến năm màu thành gradient CSS tuyến tính, tròn hay nón, với xem trước trực tiếp, mã dán ngay được và bảng màu hài hòa một cú nhấp.

Color stops

Position %

Palettes

Angle: 135°

Live preview

CSS

background-color: #7C3AED; /* fallback for old browsers */
background-image: -webkit-linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
background-image: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);

0° points up and 90° to the right — the angle runs clockwise.

Công cụ này chạy hoàn toàn trong trình duyệt của bạn. Dữ liệu không bao giờ rời khỏi thiết bị — không được tải lên bất kỳ máy chủ nào.

Cách sử dụng

1Chỉnh hai đến năm màu, hoặc bắt đầu từ một bảng màu có sẵn.
2Chọn loại gradient, rồi chỉnh góc hay hình dạng; ghim vị trí các điểm nếu muốn.
3Sao chép khối CSS và dán vào bảng kiểu của bạn.

Trình tạo gradient CSS

Chọn từ hai đến năm màu, chọn tuyến tính, tròn hay nón, rồi kéo góc — xem trước cập nhật ngay khi bạn gõ và mã CSS luôn cách một lần sao chép. Để trống vị trí của một điểm màu, nó sẽ được đặt tự động đúng cách CSS làm; nhập phần trăm chính xác để có đường cắt cứng và vùng pha lệch tâm.

Đầu ra là một khối mã sản phẩm đúng nghĩa: dòng màu đặc dự phòng cho trình duyệt cổ, dòng có tiền tố -webkit- cho nhân WebKit cũ, và cú pháp chuẩn ở cuối. Nút hài hòa ngẫu nhiên xoay sắc độ của bảng màu trong không gian HSL nên mỗi lần xáo trộn vẫn cân bằng thay vì chói lóa.

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

Vì sao CSS có dòng với tiền tố -webkit-?

Đó là dòng tương thích cho các trình duyệt WebKit cũ (thời Safari 5-6 chằng khác) chỉ hiểu -webkit-linear-gradient. Mọi trình duyệt trong thập kỷ qua đều đọc dòng chuẩn, nên bạn có thể xóa dòng có tiền tố nếu không cần hỗ trợ các bản đó — giữ lại tốn một dòng, bỏ đi không tốn gì.

Góc trong gradient tuyến tính nghĩa là gì?

Đó là hướng đi của gradient, đo theo chiều kim đồng hồ tính từ hướng lên trên: 0deg chạy từ dưới lên, 90deg từ trái sang phải, 180deg từ trên xuống. Công cụ chuẩn hóa mọi góc bạn nhập (−45 thành 315) và quy ước ngược chiều của cú pháp cũ đã được xử lý sẵn trong dòng -webkit-.

Công cụ liên quan

Tất cả công cụ Tiện ích →

Nhúng công cụ này

Đưa công cụ này vào trang của bạn bằng một dòng — nó chạy trong trình duyệt của khách.

<iframe src="https://zoyku.com/vi/tools/gradient-generator?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — gradient-generator" loading="lazy"></iframe>

100% local processing

Trình tạo gradient CSS

Cách sử dụng

Trình tạo gradient CSS

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

Công cụ liên quan

Kiểm tra tương phản

Chuyển đổi màu

Chọn màu

Viền ảnh

Nhúng công cụ này