Collection of hand-picked free HTML and CSS text animation code examples from Codepen, GitHub and other resources. Update of May 2021 collection. 28 new items.
Related Articles
Links
Made with
- HTML / CSS
About a code
Schitt's Creek (CSS)
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Ghosts and Ghouls
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
EAT SLEEP RAVE - 3D ROTATE
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Text Frame Border Animation Rotation That
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Text Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
City Nights Text Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Hello World! CSS Text Roller
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
CSS Rolling Text
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
Title Page - CSS Only
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
Rotate Text
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Text Shadow
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
CSS Text Shadow Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
3D Text
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Rotate Ipsum (CSS)
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Holographic Type
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / 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
Text Split and Reveal Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
CSS Flying Platform
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Sass)
About a code
Airport Info
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Animation in the Dark. Café Text Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Cool Text
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Happy New Year SVG Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Pure CSS Text Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Haml) / CSS (SCSS)
About a code
3D CSS Letter Transition
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Neon Tex
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
CSS Text-Shadow Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Glowing Text
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
Bottle of Text
A spinning water bottle made of text and CSS 3D transforms.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
SVG Text
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (Stylus)
About a code
Slide to Unlock Shine
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS
About a code
Waaaves
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
BlackLivesMatter
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Haml) / CSS (SCSS)
About a code
Easy Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Pure CSS Text Shadow Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Animated 3D Text
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Enthusiasm
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Stylus)
About a code
Exciting Multi-line Highlights
Ditch the boring underline, add some exciting highlights.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Shining Text Effect
Using simple CSS background-clip
technique, the text can be made to show like its under the spotlight and shining in the dark.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Rainbow Spotlight
Using background-clip:text
and animating clip-path
on pseudo element, the ranibow focus was achieved.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Wave Text
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: bootstrap.css
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
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 / CSS
About a code
Multi-line Spanning Animated Underline
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 (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
- HTML (Pug) / CSS (SCSS)
About a code
Tiger Uppercut
Knockout text with overlapping animated GIFs and CSS mix-blend-mode
.
Compatible browsers: Chrome, Edge, 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 (Slim) / CSS (SCSS)
About a code
Cinematic Text Animation. CSS only
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
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: -