Cara menggunakan Generator Wave SVG
- Klik Shuffle waves untuk gelombang acak baru, lalu + Add wave untuk menambah atau × untuk menghapus, dan atur crests serta height sesuai kebutuhan.
- Pilih Smooth, Peaks, atau Steps, dan tentukan apakah gelombang berada di bawah atau atas sebuah bagian.
- Beri setiap gelombang warna dan opasitas sendiri (atau satu warna untuk semua), bentuk ulang satu gelombang dengan ↻, dan pilih warna latar di belakangnya.
- Salin SVG, versi CSS background, atau unduh filenya.
Menambahkan pemisah gelombang ke sebuah bagian
SVG ini memakai viewBox lebar (1440 × 320) dengan preserveAspectRatio="none", sehingga melebar mengikuti lebar penuh bagian mana pun. Letakkan di tepi bagian yang warnanya sesuai:
<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; }Atau gunakan output CSS background — SVG-nya dienkode ke dalam url("data:image/svg+xml,…") sehingga tidak perlu file tambahan. Setiap lapisan adalah satu <path>; gelombang berlapis memakai warna yang makin terang secara bertahap agar terlihat lebih berdimensi.
Terkait: SVG Blob Generator, CSS Gradient Generator, SVG Optimizer.
Juga dicari sebagai: wave generator, css wave, pemisah bagian website, wave svg background, background svg bergelombang, shape divider, generator section divider.
Tool yang cocok dipakai bersama Generator Wave SVG
- Generator CSS Mask — Buat gambar dan bagian halaman memudar perlahan alih-alih berakhir tegas: pudarkan satu tepi, atas dan bawah, keempat tepi, vignette radial atau spotlight, atau potong elemen menjadi garis-garis.
- Generator CSS Clip-path — Potong gambar dan elemen menjadi bentuk apa pun: pilih salah satu dari 15 bentuk awal — segitiga, heksagon, bintang, panah, chevron, balon bicara, lingkaran, elips, persegi rounded inset… — lalu geser titiknya di atas contoh atau gambarmu sendiri.
- Generator Border Radius — Bulatkan sudut kotak mana pun: geser satu slider untuk semua sudut atau atur tiap sudut secara terpisah, beralih ke sudut elips untuk bentuk blob dan daun, lalu salin CSS border-radius terpendek yang valid.
- Generator Animasi CSS — Desain animasi CSS di atas timeline keyframe sungguhan.
Pertanyaan yang sering diajukan
Bagaimana cara menambahkan pemisah gelombang di antara dua bagian?
Buat gelombang, salin SVG-nya, lalu letakkan di bagian bawah (atau atas) bagian tersebut dengan posisi absolute dan width: 100%. Atur warna gelombang agar sama dengan warna latar bagian berikutnya.
Kenapa gelombangnya bisa melebar ke lebar berapa pun?
SVG ini memakai preserveAspectRatio="none", sehingga skalanya menyesuaikan secara horizontal untuk mengisi container, sementara tingginya bisa kamu atur lewat CSS.
Bisakah dipakai di Webflow atau WordPress?
Bisa. Tempel SVG-nya ke blok Embed / HTML, atau gunakan versi CSS background di stylesheet kamu.
Apakah gelombangnya gratis digunakan?
Ya. Gelombang dibuat langsung di perangkat kamu, jadi bisa dipakai di mana saja tanpa perlu mencantumkan atribusi.
Bisakah saya memasang Generator Wave SVG sebagai aplikasi web dan memakainya offline?
Bisa. Generator Wave SVG adalah aplikasi web (PWA) yang bisa dipasang. Pemasangannya lewat browser kamu, bukan diunduh dari toko aplikasi. Klik Pasang aplikasi di bagian atas halaman ini di Chrome atau Edge (Windows, macOS, Linux, ChromeOS) atau di Android. Di iPhone dan iPad, gunakan Bagikan → Tambahkan ke Layar Utama, dan di Safari 17+ pada Mac, gunakan File → Tambahkan ke Dock. Setelah itu, aplikasi akan terbuka di jendelanya sendiri dengan ikonnya sendiri. Karena berjalan sepenuhnya di browser kamu, aplikasi ini tetap bisa dipakai offline. Firefox di desktop tidak bisa memasang aplikasi web. Cara memasang aplikasi.