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.
6 free examples, most liked first. Click one to preview it and copy the code.
Rolling Wave Button
by @admin · Buttons
Rolling Liquid Gauge
by @admin · Wave
Layered Wave Divider
by @admin · Wave
Sine Wave Section Divider
by @admin · Layout
Wave Text Bounce
by @admin · Css Animation
Wavy Underline Link
by @admin · Hover
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.