Wavy Background — Free HTML CSS JS Canvas Hero Snippet

The wavy background is the flowing, colorful hero backdrop that gives landing pages a sense of motion and depth: several translucent waves of different colors rolling at different speeds, blended into a soft glow. This snippet renders it on an HTML <canvas> with plain vanilla JavaScript — smooth at 60fps, sharp on retina displays, and weighing nothing because there are no images.

Sharp on every display

Canvas is resolution-dependent, so the resize function reads devicePixelRatio (capped at 2 to protect performance on phones), sets the canvas's internal pixel buffer to clientWidth * dpr by clientHeight * dpr, then calls ctx.setTransform(dpr, 0, 0, dpr, 0, 0) so all drawing is done in CSS pixels but rendered at device resolution. That's the standard recipe for crisp canvas graphics — without it the waves would look blurry on HiDPI screens. The handler also re-runs on window resize so the scene always fits.

Drawing a wave as a filled path

Each wave is a filled shape, not a stroked line. The path starts at the bottom-left corner, walks across the width sampling a y value every 6 pixels, then closes back along the bottom edge — so the area under the curve fills with color. Sampling every 6px instead of every pixel is a deliberate trade: the curve stays visually smooth while doing a fraction of the work, which keeps the loop cheap even with three layers.

Organic crests from summed sines

A single Math.sin produces a mechanical, obviously-repeating wave. To make the motion feel natural, each layer sums two sines of different wavelengths and speeds — a primary wave plus a smaller, faster harmonic at 2.3× the frequency. The superposition means crests vary in height and the pattern doesn't visibly loop, which is what separates a convincing wave from a clearly synthetic one. Each layer has its own amplitude, wavelength, speed, and vertical anchor so they roll independently.

Additive glow blending

Where the translucent waves overlap, they should brighten rather than muddy. Setting ctx.globalCompositeOperation = 'lighter' before filling makes the colors add together, so intersections glow — purple over cyan reads as a luminous blend instead of a dull mix. The mode is reset to source-over after the layers so it doesn't affect anything else. The waves' own rgba alpha keeps each one translucent.

The animation loop

A requestAnimationFrame loop increments a time counter t, clears the canvas, and redraws all layers each frame. Because each layer's phase is t * speed, the waves drift at their own rates, and the cheap 6px sampling plus additive fills keep the whole thing comfortably at 60fps. The text content sits above the canvas at a higher z-index with a soft text-shadow so it stays legible over the bright waves.

Customizing it

Edit the LAYERS array to add waves, recolor them, or change their amplitude, wavelength, speed, and vertical position. Remove the lighter blend for a flatter, layered-paper look, or increase the harmonic factor for choppier water. Lower the DPR cap or sample step if you target very low-end devices. Pair it with a text generate headline or a shimmer button for a vivid hero.