← All elements
<h2 class="lf">WAVE</h2>About this animation
Large outlined text filled by a wave that slides sideways, clipped to the letter shapes.
How it works
Large text is clipped to a background that is a solid colour block. The block's vertical position animates up and down, so the fill level rises and falls inside the letters, while a text stroke keeps the outline visible.
Ways to customise it
- Change the word.
- Edit the two background positions.
- Change #38bdf8 for another liquid.
Good to know
background-clip text is supported in current browsers with a prefix. Text stays real text, so it is readable and selectable.
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.