22 CSS Text Animations
Collection of hand-picked free HTML and CSS text animation code examples.
Related Articles
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: -
