Collection of hand-picked free HTML and CSS text animation code examples. Update of December 2018 collection. 20 new items.
Related Articles
- CSS Text Effects
- CSS Text Shadow Effects
- CSS Glow Text Effects
- CSS 3D Text Effects
- CSS Text Glitch Effects
Links
Made with
- HTML / CSS (SCSS)
About a code
Neon Lights
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Rainbow Effect
Animated text with rainbow effect.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
Line Through Effect 3D
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Animated Neon Text
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Pure CSS Glitch Experiment
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Glowing Text
Glowing text using CSS keyframes
.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Animated Text with mix-blend-mode
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Liquid Drop Using Gooey Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
Spooky Typo
Experimenting with a CSS blur filter, text-shadow
, and transform skew
effects animated. Pause the animation on typo mouseover, not fog. On mobile touch typo to pause and touch anywhere else on the screen to run it again.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Text Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Cartoon Type
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
CSS 3D Text Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Word Swipe Animation
Word carousel in pure CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Luminance
background-clip
text effect.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
FadeIn Text with Bars
Pure CSS fadein text with bars.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Clean CSS Glitch
Lightweight text glitch effect, animating nothing but transform
property.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
CSS Neon Sign
Pure CSS neon sign.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Apple Commercial Animation
Recreating the iPad Commercial Animation with CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- CSS (SCSS)
About a code
SCSS-powered Animated Text
No H(TML)andlebars... or JS Typed.js ported entirely to CSS (SCSS).
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -


Links
Made with
- HTML / CSS / JavaScript
About the code
Text Animation
Text animation in HTML, CSS and JS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
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
Dependencies: -


Links
Made with
- HTML / CSS
About the code
Animated Text Gradient
Pure CSS animated text gradient.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS
About the code
Handwriting Animation
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS
About the code
Pure CSS Text Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
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: -

Links
Made with
- HTML / CSS (SCSS)
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: -


Links
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
Dependencies: -


Links
Made with
- HTML / CSS
About the code
CSS Text Revealing Animation
Very clean CSS3 text revealing animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About the code
SVG Video Mask on Text
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About the code
Text Shadow Animate
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS
About the code
Text Effect
Cool animated text effect.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Liquid Type
Creating a "wave" liquid effect on type using SVG mask.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: no
Dependencies: -


Links
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
Dependencies: -


Links
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
Dependencies: -

Links
Made with
- HTML / CSS
About the code
Impossibly Tipsy
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS
About the code
Text Animation: Montserrat
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -

Links
Made with
- HTML / CSS (Stylus)
About the code
Wave Text Effect
Wave text effect with SVG/blend mode.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -


Links
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
Dependencies: -

Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Animated Text
Animated text fill with SVG.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
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
Dependencies: -


Links
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
Dependencies: -


Links
Made with
- HTML / CSS (SCSS)
About the code
Animated Text Fill
Fill your text with animated background images - no JavaScript required.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -