Pure CSS Waves
CSS waves are flowing water, ripple and wavy divider effects created with border-radius, clip-path and animated gradients, with no SVG file needed.
7 free examples, most liked first. Click one to preview it and copy the code.
Pendulum Wave
by @admin · Wave
Wave-loader Animation Pure css
by @admin · Wave
Wavy Grass
by @admin · Wave
Pure Css Wave Progress bar
by @admin · Wave
Wave Text Animation Pure CSS
by @admin · Wave
Waves animation Pure CSS
by @admin · Wave
Wave Animation Using .png
by @admin · Wave
Waves FAQ
How do I create an animated wave in CSS?
Animate a large rounded shape sliding sideways with @keyframes, or layer several translucent shapes at different speeds. The wave examples here show how.
How do I use these pure CSS waves?
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.