Công cụ tạo gradient CSS
Công cụ tạo gradient CSS miễn phí trực tuyến, có chức năng xem trước theo thời gian thực
Các loại CSS Gradient
Linear gradient chuyển đổi màu dọc theo đường thẳng được xác định bởi góc hoặc hướng. Radial gradient chuyển đổi từ điểm trung tâm ra ngoài theo hình tròn hoặc elliptical. Cả hai đều hỗ trợ nhiều điểm dừng màu cho chuyển đổi phức tạp giữa ba màu trở lên.
Cách tạo CSS Gradient
Chọn loại gradient (linear hoặc radial), chọn màu bắt đầu và kết thúc, và điều chỉnh góc cho linear gradient. Công cụ tạo mã CSS ngay lập tức. Sao chép CSS và dán vào stylesheet của bạn dưới dạng thuộc tính background hoặc background-image.
▶Tôi có thể sử dụng nhiều hơn hai màu trong gradient không?
Có, CSS gradient hỗ trợ số lượng điểm dừng màu không giới hạn. Thêm màu bổ sung bằng cách sửa đổi mã CSS đã tạo với các giá trị màu thêm được phân tách bằng dấu phẩy.
▶Hỗ trợ trình duyệt cho CSS gradient như thế nào?
CSS gradient được hỗ trợ trong tất cả trình duyệt hiện đại. Đối với trình duyệt cũ, bạn có thể cần tiền tố nhà cung cấp (-webkit-gradient) hoặc màu dự phòng dạng đặc.
▶Tôi có thể sử dụng độ trong suốt trong gradient không?
Có. Sử dụng giá trị màu rgba() hoặc hsla() để bao gồm độ trong suốt. Ví dụ, linear-gradient(135deg, rgba(255,0,0,0.5), transparent) tạo gradient đỏ bán trong suốt.
Nếu công cụ này đã giúp ích cho bạn, hãy nghĩ đến việc mua một cốc cà phê cho tôi.
Hãy mua cho tôi một cốc cà phê nhé.