22 CSS Text Animations

Collection of hand-picked free HTML and CSS text animation code examples.

Text Animation - GIF Demo

Author

  • Keny Zachelin

 

Made with

  • HTML / CSS / JavaScript

About the code

TEXT ANIMATION

Text animation in HTML, CSS and JS.

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

 

Shining Text Animation Effects - GIF Demo

Author

  • FrankieDoodie

Made with

  • HTML / CSS

About the code

SHINING TEXT ANIMATION EFFECTS

Shining text animation effect in HTML and CSS.

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

 

Animated Text Gradient - GIF Demo

Author

  • chrishodges

Made with

  • HTML / CSS

About the code

ANIMATED TEXT GRADIENT

Pure CSS animated text gradient.

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

 

Handwriting Animation - GIF Demo

Author

  • Marina

Made with

  • HTML / CSS

About the code

HANDWRITING ANIMATION

Compatible browsers:Chrome, Firefox, Opera, Safari

 

Pure CSS Text Animation - GIF Demo

Author

  • Arlina Design

Made with

  • HTML / CSS

About the code

PURE CSS TEXT ANIMATION

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

 

Masking Path Animation - GIF Demo

Author

  • Envato Tuts+

Made with

  • HTML / CSS

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:

Demo image: CSS Only Frozen Text

Author

  • Mandy Michael

Made with

  • HTML / CSS (SCSS)

About the code

CSS ONLY FROZEN TEXT

CSS only animated frozen text effect with background-clipmix-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

 

HTML, CSS, and JS Letter Animation - GIF Demo

Author

  • Florin Pop

Made with

  • HTML / CSS / JavaScript

About the code

HTML, CSS AND JS LETTER ANIMATION

Animating letters with CSS.

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

 

CSS Text Revealing Animation - GIF Demo

Author

  • Nooray Yemon

Made with

  • HTML / CSS

About the code

CSS TEXT REVEALING ANIMATION

Very clean CSS3 text revealing animation.

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

 

Demo image: SVG Video Mask on Text

Author

  • Simon Evans

Made with

  • HTML / CSS (SCSS)

About the code

SVG VIDEO MASK ON TEXT

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

 

Demo image: Text Shadow Animate

Author

  • Wyatt Nolen

Made with

  • HTML / CSS (SCSS)

About the code

TEXT SHADOW ANIMATE

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

 

Text Effect - GIF Demo

Author

  • Hakkam Abdullah

Made with

  • HTML / CSS

About the code

TEXT EFFECT

Cool animated text effect.

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

 

Animated Wave Clipped by Text - GIF Demo

Author

  • web-tiki

Made with

  • HTML / CSS

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

 

Pure CSS Text Animation - GIF Demo

Author

  • Robin Treur

Made with

  • HTML / CSS (SCSS)

About the code

PURE CSS TEXT ANIMATION

Text animation in HTML and CSS.

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

 

Demo image: Impossibly Tipsy

Author

  • James Mellers

Made with

  • HTML / CSS

About the code

IMPOSSIBLY TIPSY

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

 

Demo image: Text Animation: MontserratText Animation: Montserrat - GIF Demo

Author

  • Claire Larsen

Made with

  • HTML / CSS

About the code

TEXT ANIMATION: MONTSERRAT

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

 

Demo image: Wave Text Effect

Author

  • Lucas Bebber

Made with

  • HTML / CSS (Stylus)

About the code

WAVE TEXT EFFECT

Wave text effect with SVG/blend mode.

Compatible browsers:Chrome, Firefox, Opera, Safari

 

CSS Only Random Text Transform - GIF Demo

Author

  • lefoy

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

CSS ONLY RANDOM TEXT TRANSFORM

Generate random text transformation using CSS only.

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

Demo image: Animated Text

Author

  • Cesar C.

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

ANIMATED TEXT

Animated text fill with SVG.

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

 

Animated text-shadow Pattern - GIF Demo

Author

  • carpe numidium

Made with

  • HTML / CSS

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

 

Smoky Text - GIF Demo

Author

  • Bennett Feely

Made with

  • HTML / CSS (SCSS)

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

 

Please follow and like us: