Trình tạo gradient CSS
Thiết kế gradient nền CSS mà không cần ghi nhớ cú pháp. Chuyển đổi giữa các loại tuyến tính và xuyên tâm, đặt góc cho độ dốc tuyến tính (độ) và chọn hai điểm dừng màu ở 0% và 100%. Bản xem trước cập nhật ngay lập tức; sao chép toàn bộ phần khai báo nền hoặc hình nền vào biểu định kiểu của bạn. Hỗ trợ đầu vào màu HEX có xác thực.
Góc (°)
Màu 1
Màu 2
CSS
background: linear-gradient(135deg, #6f9b96 0%, #e8c4b8 100%);
Cách tạo dải màu
1. Chọn dải màu tuyến tính hoặc xuyên tâm.
2. Đối với tuyến tính, đặt góc theo độ (0 = từ dưới lên trên, 90 = từ trái sang phải).
3. Nhập màu bắt đầu và màu kết thúc (HEX).
4. Sao chép CSS từ thẻ kết quả vào thẻ kết quả của bạn project.
Ví dụ về gradient
Biểu ngữ anh hùng tuyến tính (135deg)
Teal #6F9B96 đào #E8C4B8 ở 135° — một đường chéo phổ biến trong tiêu đề trang đích. Sử dụng làm nền trên phần có chiều rộng đầy đủ.
Tiêu điểm xuyên tâm
Loại xuyên tâm có tâm sáng và cạnh tối — mô phỏng họa tiết: radial-gradient(circle, #fff 0%, #333 100%).
Làm mờ theo chiều dọc (180deg)
Góc 180 cho chuyển từ màu thương hiệu sang màu trắng từ trên xuống dưới — hữu ích sau các thanh điều hướng.
Khi nào nên dùng công cụ này
• Khi bạn tạo nền giao diện người dùng mẫu và muốn có phản hồi trực quan ngay lập tức.
• Khi bạn quên góc 90 độ chạy từ trái sang phải hay từ trên xuống dưới.
• Khi bạn cần sao chép-dán CSS cho CodePen, các giá trị tùy ý của Tailwind hoặc chuyển giao thiết kế.
Khi nào nên chọn công cụ khác
• Khi bạn cần nhiều hơn hai điểm dừng màu — mở rộng CSS đã sao chép theo cách thủ công hoặc sử dụng ứng dụng thiết kế.
• Khi bạn muốn chuyển màu hình nón (quét) — không được hỗ trợ tại đây.
• Khi bạn cần các biến thể chế độ tối tự động — sao chép và điều chỉnh màu riêng biệt.
Màu dừng chi tiết
Dừng là màu cộng với vị trí tùy chọn: #ff0000 0%, #0000ff 50%, #00ff00 100%. Trình duyệt nội suy RGB giữa các điểm dừng. Điểm dừng ở giữa tạo ra các dải màu hoàng hôn hoặc sọc đa thương hiệu. Bắt đầu với hai điểm dừng ở đây, sau đó dán và thêm điểm dừng thứ ba vào công cụ phát triển cho đến khi nó trông ổn.
Góc dốc tuyến tính
CSS đo các góc theo chiều kim đồng hồ từ “lên” (0deg). Điều đó khác với lớp toán nơi các góc thường bắt đầu từ bên phải. Nếu độ dốc có vẻ bị xoay sai, hãy cộng hoặc trừ 90 độ. Sử dụng tính năng chỉnh sửa trực tiếp của devtools cùng với trình tạo này để tinh chỉnh.
Hiệu suất và dự phòng
Độ dốc thân thiện với GPU trên các trình duyệt hiện đại. Đối với các máy khách rất cũ, hãy đặt dự phòng màu nền đồng nhất thành màu dừng nhạt hơn trước đường chuyển màu.
Câu hỏi thường gặp
Cú pháp CSS cho chuyển màu tuyến tính là gì?
nền: gradient tuyến tính(angle, color1 0%, color2 100%); Góc tính bằng độ; màu sắc là các điểm dừng dọc theo đường.
Các điểm dừng màu hoạt động như thế nào?
Các điểm dừng ở vị trí mỗi màu nằm trên đường chuyển màu. 0% là bắt đầu, 100% là kết thúc. Công cụ này sửa hai điểm dừng; thêm nhiều thông tin khác vào trình chỉnh sửa của bạn nếu cần.
Tuyến tính so với hướng tâm?
Tuyến tính hòa trộn dọc theo một đường thẳng. Hướng tâm hướng ra ngoài từ điểm trung tâm — phù hợp với vòng tròn và điểm mềm.
Những giá trị góc nào là phổ biến?
0 độ hướng lên, 90 độ sang phải, 180 độ hướng xuống, 135 độ chéo — phổ biến cho thẻ và anh hùng.
Nó đặt nền hay hình nền?
Đầu ra sử dụng tốc ký nền phù hợp đối với hầu hết các div; bạn có thể chia thành hình nền nếu ghi đè các lớp khác.
Màu sắc có được gửi đến máy chủ không?
Không. Xem trước hiển thị cục bộ.
Tính năng này có miễn phí không?
Có, không cần tài khoản.