Cách dùng Trình tạo pattern SVG
- Chọn một mẫu: chấm bi, lưới, đường kẻ, zigzag, sóng, dấu cộng, bàn cờ, hình tròn, tam giác, gạch chéo, hình thoi hoặc sọc.
- Đặt kích thước ô, độ dày nét và độ mờ; độ mờ thấp sẽ tạo họa tiết tinh tế.
- Chọn màu mẫu và màu nền, hoặc nền trong suốt để đặt mẫu lên trên màu hay gradient của riêng bạn.
- Sao chép CSS (SVG được nhúng dưới dạng data URI) hoặc tải ô mẫu về dưới dạng file SVG.
Vì sao dùng pattern SVG?
Một ô pattern là một SVG nhỏ — thường dưới 300 byte — được trình duyệt lặp lại nhờ background-repeat. Hình luôn sắc nét ở mọi mức zoom và trên màn hình retina, không cần thêm request khi nhúng dưới dạng data URI, và có thể đổi màu ngay lập tức chỉ bằng cách thay hai giá trị.
.hero {
background-color: #0f172a;
background-image: url("data:image/svg+xml,…");
background-size: 24px 24px;
}Các mẫu được thiết kế để mép khớp hoàn hảo khi lặp lại. Muốn xếp pattern lên trên gradient, hãy tick Nền trong suốt và liệt kê cả hai ảnh: background-image: url(…pattern…), linear-gradient(…). Với đường phân cách cho hero, xem Trình tạo sóng SVG và Trình tạo đường phân cách section.
Cũng được tìm dưới tên: tạo pattern svg, css background pattern, tạo mẫu nền svg, svg background generator, dot pattern css, grid pattern css, hero pattern, họa tiết nền css.
Các công cụ dùng kèm tốt với Trình tạo pattern SVG
- Tạo CSS Gradient — Thiết kế gradient trực quan: kéo các điểm màu, đổi góc hoặc kiểu, chọn sẵn một mẫu có sẵn rồi sao chép CSS dùng được ngay, kèm màu nền đặc làm phương án dự phòng.
- Tạo SVG Blob — Tạo hình blob hữu cơ, mượt mà cho nền hero, avatar và minh họa.
- SVG sang CSS — Dán SVG vào để nhận data URI gọn đã mã hóa URL, cùng sẵn CSS background-image và mask-image có thể đổi màu.
- Trình tạo Glassmorphism — Thiết kế thẻ kính mờ với thanh trượt xem trước trực tiếp và sao chép CSS tương thích đa trình duyệt, gồm tiền tố -webkit-backdrop-filter và phương án dự phòng cho trình duyệt cũ.
Câu hỏi thường gặp
Làm sao thêm nền họa tiết chấm bi bằng CSS?
Chọn Dots, đặt kích thước và màu, rồi sao chép CSS: nó sẽ đặt background-image thành ô SVG nhúng sẵn và background-size bằng kích thước ô, nên các chấm lặp lại liền mạch.
Có thể đặt pattern lên trên gradient không?
Có — tick Nền trong suốt, sau đó thêm gradient của bạn sau pattern: background-image: url(...), linear-gradient(...).
Pattern SVG có làm trang chậm đi không?
Không. Mỗi ô chỉ vài trăm byte được nhúng trực tiếp trong CSS, nên không có tải thêm và SVG được render rất hiệu quả.
Có thể dùng pattern trong Webflow không?
Có — dán CSS vào một Embed có thẻ style nhắm tới class của bạn, hoặc tải file SVG và đặt làm background image với chế độ lặp.
Tôi có thể cài Trình tạo pattern SVG như một ứng dụng web và dùng khi không có mạng không?
Có. Trình tạo pattern SVG là một ứng dụng web (PWA) có thể cài đặt — cài trực tiếp từ trình duyệt, không cần tải từ cửa hàng ứng dụng. Trên Chrome hoặc Edge (Windows, macOS, Linux, ChromeOS) hoặc Android, bấm Cài đặt ứng dụng ở đầu trang này; trên iPhone và iPad, dùng Chia sẻ → Thêm vào Màn hình chính; trên Mac, dùng File → Add to Dock trong Safari 17 trở lên. Sau đó ứng dụng mở trong cửa sổ riêng với biểu tượng riêng, và vì chạy hoàn toàn trên trình duyệt nên vẫn hoạt động khi không có mạng. Firefox trên máy tính không thể cài ứng dụng web. Cách cài đặt hoạt động thế nào.