← All elements
<div class="wv"><i class="a"></i><i class="b"></i><span>Waves</span></div>About this wave
Two overlapping animated waves drawn with rotating rounded shapes inside a clipped box, great as a section divider.
How it works
Two very large circles with border-radius of 44 percent sit low inside a clipped box. Each rotates slowly, one in reverse, and as the slightly squashed circles turn, their top edges rise and fall like waves. Semi-transparent colours blend where they overlap, which gives the layered effect.
Ways to customise it
- Change the sky gradient and the two wave colours.
- Edit the durations of 9s and 13s.
- Move the waves up or down with the top values.
Good to know
Decorative and stops under reduced motion. The overflow hidden on the box keeps the circles from showing outside.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.