← All elements
<div class="tw"><b>Ocean plan</b><span>Calm seas, clear data.</span><i></i><i></i></div>About this card
A card with two layered wave shapes drifting at different speeds along its bottom edge.
How it works
Two wide elements with large rounded corners sit at the card's bottom and rotate slowly. Because they are much wider than the card and clipped by overflow hidden, only a gentle wave edge is visible, and the second turns the other way at another speed.
Ways to customise it
- Change the two white tints.
- Edit the durations.
- Change the card gradient.
Good to know
Text sits above the waves, so check contrast over the lighter wave tint. Motion stops under reduced motion.
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.