Cách dùng Tạo sóng SVG
- Nhấn Xáo trộn sóng để tạo sóng ngẫu nhiên mới, sau đó dùng + Thêm sóng hoặc nhấn × để xóa, rồi tinh chỉnh số đỉnh và chiều cao.
- Chọn Mượt, Nhọn hoặc Bậc thang, và chọn sóng nằm ở phía dưới hay phía trên của section.
- Đặt màu và độ mờ riêng cho từng sóng (hoặc chọn một màu cho tất cả), tạo lại hình dạng một sóng bằng ↻, rồi chọn màu nền phía sau.
- Sao chép SVG, hoặc phiên bản CSS background, hoặc tải file về.
Thêm đường phân cách sóng vào một section
SVG dùng viewBox rộng (1440 × 320) với preserveAspectRatio="none", nên nó sẽ co giãn để phủ kín toàn bộ chiều rộng của bất kỳ section nào. Hãy đặt sóng ở mép của section có màu khớp với màu sóng:
<section class="hero">
…
<svg class="wave" viewBox="0 0 1440 320" preserveAspectRatio="none">…</svg>
</section>
.hero { position: relative; }
.wave { position: absolute; bottom: 0; left: 0; width: 100%; height: 120px; }Hoặc dùng kết quả CSS background — SVG được mã hóa thành url("data:image/svg+xml,…") nên bạn không cần thêm file nào. Mỗi lớp là một <path> duy nhất; các lớp sóng sẽ dùng các sắc độ nhạt dần của màu bạn chọn để tạo chiều sâu.
Xem thêm: Tạo SVG Blob, Tạo CSS Gradient, Tối ưu SVG.
Cũng được tìm dưới tên: wave generator, css wave, tạo đường phân cách section, nền sóng svg, wave svg, shape divider, tạo hiệu ứng sóng css.
Các công cụ dùng kèm tốt với Tạo sóng SVG
- Trình tạo CSS Mask — Làm cho ảnh và khối nội dung mờ dần thay vì kết thúc đột ngột: làm mờ một cạnh, trên và dưới, cả bốn cạnh, vignette tròn hoặc đèn sân khấu, cắt phần tử thành các dải sọc — hoặc che phần tử bằng một hình dạng (ngôi sao, trái tim, lục giác, mũi tên…) với viền mềm, mờ dần mà clip-path không làm được.
- Công cụ tạo CSS Clip-path — Cắt ảnh và phần tử thành hình dạng bất kỳ: chọn một trong 15 hình mẫu có sẵn như tam giác, lục giác, ngôi sao, mũi tên, chevron, bong bóng thoại, hình tròn, hình elip, hình chữ nhật bo góc… rồi kéo các điểm trên ảnh mẫu hoặc ảnh của bạn.
- Trình tạo Border Radius — Bo tròn các góc của bất kỳ khung nào: kéo một thanh trượt cho tất cả các góc hoặc đặt từng góc riêng, chuyển sang góc elliptical để tạo hình blob và lá, rồi sao chép đoạn CSS border-radius ngắn gọn và hợp lệ nhất.
- Trình tạo animation CSS — Thiết kế animation CSS trên timeline keyframe thực tế.
Câu hỏi thường gặp
Làm sao để thêm đường phân cách sóng giữa các section?
Tạo sóng, sao chép SVG rồi đặt ở phía dưới (hoặc phía trên) của section, với position tuyệt đối và width: 100%. Đặt màu sóng bằng màu nền của section tiếp theo.
Vì sao sóng co giãn được theo mọi chiều rộng?
SVG dùng preserveAspectRatio="none" nên nó tự co giãn theo chiều ngang để lấp đầy container, còn bạn vẫn kiểm soát chiều cao bằng CSS.
Có dùng được trên Webflow hoặc WordPress không?
Có. Dán SVG vào khối Embed / HTML, hoặc dùng phiên bản CSS background trong stylesheet của bạn.
Các sóng này có miễn phí không?
Có. Sóng được tạo ngay trên thiết bị của bạn; bạn có thể dùng ở bất kỳ đâu mà không cần ghi nguồn.
Tôi có thể cài Tạo sóng SVG như một ứng dụng web và dùng khi không có mạng không?
Có. Tạo sóng 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.