Animated wave backgrounds you can paste into any site.
Vayro's Wave engine builds layered, flowing SVG waves and exports them with the CSS animation attached. Pick colours, stack up to eight layers, tune complexity and speed, and copy the result straight into a hero section, footer or section divider. Free, no signup, no JavaScript library.
Wave backgrounds from the engine
Click any background to open it in the engine.
How the animated wave export works
The Wave engine renders each layer as an SVG path with a class like vayro-wave-layer-1, vayro-wave-layer-2 and so on. The CSS export defines a keyframe animation and applies it to those exact class names, with per layer duration and delay so the layers move at different speeds and never look mechanical. Paste both blocks and the wave animates. Nothing to rename.
You control layer count, wave height, complexity, direction, animation speed, colours per layer, opacity, optional stroke and blur. Curated palettes (Ocean, Sunset, Forest, Midnight and more) apply across all layers with one click; individual layer colours stay editable.
The whole thing is plain SVG + CSS. It runs on a static HTML page, inside a React component, in a WordPress block, in an email preview that renders SVG. There is no runtime, so it costs nothing on the JavaScript budget.
Where animated waves work best
Hero sections on SaaS and product pages, where a slow wave under the headline adds depth without pulling focus. Section dividers between blocks of content. Footers, where a calm wave closes the page. Dashboards, where a thin low contrast wave gives a live feel to a monitoring view (see the Data Flow example above).
Keep motion slow and layered for hero use, and use static mode when the page already has a lot going on. Every export includes a prefers-reduced-motion guard, so users who turn animation off get a stable frame.
Three steps to a live background
- Step 1Choose a wave preset
Start from Dark SaaS, Data Flow or any Wave preset, or a blank canvas.
- Step 2Tune layers and motion
Layer count, height, complexity, speed, colours. The preview updates as you drag.
- Step 3Copy SVG + CSS
Two copies and it is live. Class names in the SVG match the CSS selectors.
Common questions
Is the animated wave background pure CSS?
The wave shapes are SVG paths and the motion is CSS keyframes applied to those paths. Together it is plain SVG + CSS, no JavaScript.
Can I change the wave colours after export?
Yes. The SVG is readable markup, so you can edit fills, opacity and the CSS durations by hand. Or reopen the share link in Vayro and re export.
How many wave layers can I stack?
Up to eight, each with its own colour, opacity and animation timing.
Will it slow down my page?
A wave background is a few KB of SVG and CSS with transform based animation, which browsers handle on the compositor. Keep blur off for the lightest result.