22 CSS Text Animations

About the code

Text Animation

Text animation in HTML, CSS and JS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Shining Text Animation Effects

Shining text animation effect in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Animated Text Gradient

Pure CSS animated text gradient.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Handwriting Animation

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

About the code

Pure CSS Text Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Masking Path Animation

Sometimes simple is just as effective as complex. I’m a huge fan of typography and in this example by Steven Sinatra an SVG mask is used to help isolate the text and animate it in place. A fun approach that can be used for those well-known hero sections.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

CSS Only Frozen Text

CSS only animated frozen text effect with background-clip, mix-blend-mode and gradient text. JS is to make the text editable for demo purpose, not required for the effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

HTML, CSS and JS Letter Animation

Animating letters with CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

CSS Text Revealing Animation

Very clean CSS3 text revealing animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

SVG Video Mask on Text

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Text Shadow Animate

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Text Effect

Cool animated text effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Animated Wave Clipped by Text

Animated wave inside text with SVG. Image in the background and gradient filling the wave.

Compatible browsers: Chrome, Opera, Safari

Dependencies: -

About the code

Pure CSS Text Animation

Text animation in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Impossibly Tipsy

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Text Animation: Montserrat

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Wave Text Effect

Wave text effect with SVG/blend mode.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

About the code

CSS Only Random Text Transform

Generate random text transformation using CSS only.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Animated Text

Animated text fill with SVG.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Animated text-shadow Pattern

Uses background-clip: text & linear-gradient to simulate striped text shadow.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Smoky Text

Combining text-shadow and CSS transforms (especially skew) for a smoky (or smokey?) effect.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

About the code

Animated Text Fill

Fill your text with animated background images - no JavaScript required.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -