Cómo usar: Generador de Olas SVG
- Haz clic en Mezclar olas para generar una ola aleatoria nueva, luego pulsa + Añadir ola o quita una con ×, y ajusta las crestas y la altura.
- Elige Suave, Picos o Escalones, y decide si la ola va en la parte inferior o superior de una sección.
- Asigna a cada ola su propio color y opacidad (o un solo color para todas), cambia la forma de una ola con ↻ y elige el fondo que hay detrás.
- Copia el SVG, la versión de fondo CSS o descarga el archivo.
Añadir un separador de olas a una sección
El SVG usa un viewBox ancho (1440 × 320) con preserveAspectRatio="none", así que se estira al ancho completo de cualquier sección. Colócalo en el borde de la sección cuyo color coincida con el suyo:
<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; }También puedes usar la salida fondo CSS: el SVG se codifica en un url("data:image/svg+xml,…"), así que no necesitas ningún archivo extra. Cada capa es un único <path>; las olas en capas usan tonos progresivamente más claros de tu color para dar profundidad.
Relacionado: Generador de Blobs SVG, Generador de Gradientes CSS, Optimizador de SVG.
También se busca como: generador de ondas css, divisor de sección svg, separador ondulado svg, fondo ondulado svg, forma divisoria svg, generador de separadores svg, olas en capas svg.
Herramientas que combinan con: Generador de Olas SVG
- Generador de máscaras CSS — Haz que imágenes y secciones se desvanezcan en lugar de cortarse en seco: difumina un borde, arriba y abajo, los cuatro bordes, una viñeta radial o un foco, corta el elemento en franjas, o enmascáralo con una forma (estrella, corazón, hexágono, flecha…) con bordes suaves y difuminados que clip-path no puede lograr.
- Generador de clip-path CSS — Recorta imágenes y elementos en cualquier forma: elige una de 15 formas iniciales (triángulo, hexágono, estrella, flecha, chevron, bocadillo, círculo, elipse, inset redondeado…) y luego arrastra los puntos sobre una muestra o sobre tu propia imagen.
- Generador de Border Radius — Redondea las esquinas de cualquier caja: arrastra un control para todas las esquinas o define cada esquina por separado, cambia a esquinas elípticas para formas de blob y hoja, y copia el CSS border-radius válido más corto.
- Generador de animaciones CSS — Diseña animaciones CSS sobre una línea de tiempo real de keyframes.
Preguntas frecuentes
¿Cómo añado un separador de olas entre secciones?
Genera una ola, copia el SVG y colócalo en la parte inferior (o superior) de la sección, con posición absoluta y width: 100%. Define el color de la ola como el color de fondo de la siguiente sección.
¿Por qué la ola se estira a cualquier ancho?
El SVG usa preserveAspectRatio="none", así que se escala horizontalmente para llenar el contenedor, mientras controlas su altura en CSS.
¿Puedo usarlo en Webflow o WordPress?
Sí: pega el SVG en un bloque Embed / HTML, o usa la versión de fondo CSS en tu hoja de estilos.
¿Las olas son gratis?
Sí. Se generan en tu dispositivo; puedes usarlas donde quieras sin atribución.
¿Puedo instalar Generador de Olas SVG como aplicación web y utilizarla sin conexión?
Sí. Generador de Olas SVG es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.