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%.
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ế.
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.
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.