Tạo gradient CSS
Tạo gradient CSS với xem trước thời gian thực.
Presets:
background: linear-gradient(135deg, #D94F30, #0D7C66);Gradient CSS là gì?
Gradient CSS là chuyển đổi mượt mà giữa hai hoặc nhiều màu được áp dụng làm nền cho phần tử HTML. Đây là một trong những thuộc tính linh hoạt nhất trong thiết kế web hiện đại, cho phép tạo nền hấp dẫn và chuyên nghiệp mà không cần hình ảnh. Gradient giảm trọng lượng trang bằng cách loại bỏ phụ thuộc file đồ họa, cải thiện thời gian tải và thích ứng hoàn hảo với mọi độ phân giải, bao gồm màn hình Retina và mật độ pixel cao.
Có hai loại gradient CSS chính: tuyến tính và tỏa tròn. Gradient tuyến tính tạo chuyển đổi màu dọc theo đường thẳng, xác định bằng góc (ví dụ từ trên xuống, chéo hoặc bất kỳ hướng nào). Gradient tỏa tròn phát ra từ điểm trung tâm ra ngoài theo hình tròn hoặc elip, tạo hiệu ứng chiếu sáng và chiều sâu phổ biến trong giao diện hiện đại.
Gradient CSS tương thích với mọi trình duyệt hiện đại, bao gồm Chrome, Firefox, Safari, Edge và Opera. Trình tạo gradient cho phép thử nghiệm màu, góc và loại theo thời gian thực, tạo mã CSS tự động sẵn sàng sao chép và dán vào dự án web.
Câu hỏi thường gặp
Có hoạt động trên tất cả trình duyệt không?
Có. Gradient CSS tương thích với mọi trình duyệt hiện đại không cần tiền tố nhà cung cấp. Chrome, Firefox, Safari, Edge và Opera đều hỗ trợ gốc. Chỉ trình duyệt rất cũ như Internet Explorer 9 trở xuống không hỗ trợ.
Có thể dùng nhiều hơn 2 màu không?
Có, CSS cho phép gradient với nhiều điểm dừng màu. Mặc dù trình tạo làm việc với 2 màu để đơn giản hóa giao diện, bạn có thể chỉnh sửa thủ công mã kết quả để thêm màu bằng cách phân tách bằng dấu phẩy trong khai báo gradient.
Dùng mã được tạo thế nào?
Đơn giản sao chép mã CSS bằng nút "Sao chép" và dán vào thuộc tính style của phần tử HTML mong muốn. Có thể dùng trong stylesheet CSS, thuộc tính style inline, hoặc trong framework như Tailwind CSS hay styled-components.
Muốn tìm hiểu thêm? Đọc hướng dẫn đầy đủ →