By · Updated

Wavy Text Animation

Wave Passing Through Each Letter in Turn, Bouncing Letters in CSS

No ratings yet

4 Wavy Text Animation presets to start from

OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.

How the Wavy Text Animation works

This wavy text animation generator splits a word into letters and lifts each one a moment after the last, so a wave rolls through the text on a loop. Set the text, size, wave height, delay and speed, then copy the HTML and CSS.

A gentle wave suits greetings, loaders and playful headings where a little motion adds character.

How the wavy text animation works

Every letter is wrapped in its own inline-block <span> so it can move on its own. All letters share one keyframe that lifts and drops them, and each gets a slightly larger animation-delay through an nth-child rule. The stagger between delays is what turns separate bounces into a wave.

Accessibility

Splitting a word into spans can make screen readers spell it out letter by letter, so the wrapper carries the full text in aria-label and the letters are hidden from assistive technology. The animation is switched off for visitors who prefer reduced motion.

FAQ

How do I make the wave smoother?

Use a smaller delay between letters relative to the wave time. A delay around a tenth of the loop time gives a smooth rolling wave, while a larger delay makes each letter jump separately.

Do spaces in the text still work?

Yes. Each span uses white-space: pre, so a space keeps its width and moves with the wave like any other letter. The generator takes up to 40 characters of text.

Can I add a colour gradient to the wave?

Yes. Give the spans a gradient background with background-clip: text, or set a different colour on a few nth-child rules, and the colour travels with the letters as they move.

See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.

Related tools

Text Animation

Animate a headline letter by letter and copy the CSS.

Text Scramble Effect

Make a headline decode from random characters with pure CSS.

Staggered Animation Builder

Make list items animate in one after another with CSS.

Gradient Text Generator

Fill headline text with a CSS gradient and copy the code.

Sparkle Text Effect

Little stars that twinkle around a word or heading.