UTILS.
Riêng tư ngay từ đầu
▤

Trình tạo CSS Gradient

Tạo gradient linear hoặc radial với xem trước trực tiếp và sao chép CSS.

Tệp luôn ở trên thiết bị này

Tệp được xử lý trong trình duyệt, không bao giờ tải lên máy chủ. Trang web tải mã và tài nguyên cần thiết để chạy công cụ. Không tài khoản hay theo dõi.

Dùng Tải xuống để lưu công cụ thành một tệp HTML dùng ngoại tuyến.

Quyền riêng tư →

Thử một ví dụ cụ thể

Ví dụ

Chọn kiểu tuyến tính, đặt góc 135 và các màu #ff7e5f và #feb47b. CSS là background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);. Dời điểm dừng đầu tiên đến 20 sẽ giữ màu đầu đồng nhất trên 20% đầu của khung.

Lưu ý

0deg hướng lên và 90deg hướng sang phải, nên 135deg chạy từ góc trên bên trái xuống góc dưới bên phải. Nếu có chữ trên dải chuyển sắc, hãy kiểm tra độ tương phản với cả hai màu đầu cuối.

Về công cụ này

Tạo gradient hai màu kiểu linear hoặc radial bằng cách chọn màu sắc, vị trí và góc, rồi sao chép quy tắc background. Phần xem trước trực tiếp chạy hoàn toàn trong trình duyệt của bạn.

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

Góc trong gradient linear là gì?
Góc xác định hướng chuyển màu: 0° hướng lên trên, 90° hướng sang phải, 180° hướng xuống dưới, và cứ thế tiếp tục.
Khi nào nên dùng radial thay vì linear?
Dùng radial để màu lan tỏa ra ngoài từ một điểm trung tâm (như đèn rọi); linear thì pha trộn màu dọc theo một đường thẳng.

Công cụ khác