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

  1. jQuery Text Animations And Effects

Author

  • Rob

Made with

  • HTML / CSS

About a code

Schitt's Creek (CSS)

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

Responsive: yes

Dependencies: -

Author

  • Sicontis

Made with

  • HTML / CSS

About a code

Ghosts and Ghouls

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

Responsive: yes

Dependencies: -

Author

  • Emilio

Made with

  • HTML / CSS (SCSS)

About a code

EAT SLEEP RAVE - 3D ROTATE

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

Responsive: yes

Dependencies: -

Author

  • Fernando Cohen

Made with

  • HTML / CSS (SCSS)

About a code

Text Frame Border Animation Rotation That

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

Responsive: yes

Dependencies: -

Author

  • Carlos Córdova

Made with

  • HTML / CSS

About a code

Text Animation

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

Responsive: no

Dependencies: -

Author

  • Philip Zastrow

Made with

  • HTML / CSS

About a code

City Nights Text Effect

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

Responsive: no

Dependencies: -

Author

  • Ale

Made with

  • HTML / CSS

About a code

Hello World! CSS Text Roller

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

Responsive: yes

Dependencies: -

Author

  • Marcello Lopes

Made with

  • HTML / CSS

About a code

CSS Rolling Text

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

Responsive: yes

Dependencies: -

Author

  • Event Horizon

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Title Page - CSS Only

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

Responsive: yes

Dependencies: -

Author

  • Jason Yeung

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Rotate Text

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

Responsive: yes

Dependencies: -

Author

  • Gabriele

Made with

  • HTML / CSS (SCSS)

About a code

Text Shadow

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

Responsive: yes

Dependencies: -

Author

  • Natalia

Made with

  • HTML / CSS (SCSS)

About a code

CSS Text Shadow Animation

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

Responsive: no

Dependencies: -

Author

  • Kevin

Made with

  • HTML / CSS (SCSS)

About a code

3D Text

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

Responsive: no

Dependencies: -

Author

  • Amit Sheen

Made with

  • HTML / CSS (SCSS)

About a code

Rotate Ipsum (CSS)

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

Responsive: no

Dependencies: -

Author

  • Nils Binder

Made with

  • HTML / CSS (SCSS)

About a code

CSS

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

Responsive: no

Dependencies: -

Author

  • Jimmy Chion

Made with

  • HTML / CSS

About a code

Holographic Type

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

Responsive: no

Dependencies: -

Author

  • Gayane

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Text Animation

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

Responsive: no

Dependencies: -

Author

  • Ritika Agrawal

Made with

  • HTML / CSS

About a code

Text Split and Reveal Animation

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

Responsive: yes

Dependencies: -

Author

  • Amit Sheen

Made with

  • HTML / CSS (SCSS)

About a code

CSS Flying Platform

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

Responsive: no

Dependencies: -

Author

  • Quinto Jesús

Made with

  • HTML (Pug) / CSS (Sass)

About a code

Airport Info

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

Responsive: no

Dependencies: -

Author

  • @keyframers

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

Author

  • Christine Banlawi

Made with

  • HTML / CSS

About a code

Cool Text

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

Responsive: yes

Dependencies: -

Author

  • Ayana

Made with

  • HTML / CSS (SCSS)

About a code

Happy New Year SVG Animation

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

Responsive: no

Dependencies: -

Author

  • vainsan

Made with

  • HTML / CSS

About a code

Pure CSS Text Animation

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

Responsive: yes

Dependencies: -

Author

  • Adam Kuhn

Made with

  • HTML (Haml) / CSS (SCSS)

About a code

3D CSS Letter Transition

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

Responsive: no

Dependencies: -

Author

  • Mohamed

Made with

  • HTML / CSS

About a code

Neon Tex

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

Responsive: no

Dependencies: -

Author

  • Faria Begum Riya

Made with

  • HTML / CSS (SCSS)

About a code

CSS Text-Shadow Animation

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

Responsive: yes

Dependencies: -

Author

  • Pratham

Made with

  • HTML / CSS

About a code

Glowing Text

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

Responsive: no

Dependencies: -

Author

  • Jon Kantner

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

Author

  • ANA MAFLA

Made with

  • HTML / CSS

About a code

SVG Text

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

Responsive: no

Dependencies: -

Author

  • Andreas Storm

Made with

  • HTML / CSS (Stylus)

About a code

Slide to Unlock Shine

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

Responsive: no

Dependencies: -

Author

  • Jhey

Made with

  • HTML (Pug) / CSS

About a code

Waaaves

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

Responsive: no

Dependencies: -

Author

  • Max Mykhalchuk

Made with

  • HTML / CSS

About a code

BlackLivesMatter

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

Responsive: yes

Dependencies: -

Author

  • Mark Mead

Made with

  • HTML (Haml) / CSS (SCSS)

About a code

Easy Animation

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

Responsive: yes

Dependencies: -

Author

  • peyman

Made with

  • HTML / CSS

About a code

Pure CSS Text Shadow Animation

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

Responsive: yes

Dependencies: -

Author

  • Sarah Fossheim

Made with

  • HTML / CSS (SCSS)

About a code

Animated 3D Text

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

Responsive: no

Dependencies: -

Author

  • Robin Rendle

Made with

  • HTML / CSS (SCSS)

About a code

Enthusiasm

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

Responsive: yes

Dependencies: -

Author

  • Manan Tank

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

Author

  • G Rohit

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

Author

  • Shireen

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

Author

  • Swarup Kumar Kuila

Made with

  • HTML / CSS

About a code

Wave Text

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

Responsive: yes

Dependencies: bootstrap.css

Author

  • Cooper

Made with

  • HTML / CSS (SCSS)

About a code

Neon Lights

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Mateus Generoso

Made with

  • HTML / CSS (SCSS)

About a code

Rainbow Effect

Animated text with rainbow effect.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Ana Tudor

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Line Through Effect 3D

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Tee Diang

Made with

  • HTML / CSS

About a code

Animated Neon Text

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

Responsive: no

Dependencies: -

Author

  • Amber Martineau

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

Author

  • Cassandra Rossall

Made with

  • HTML / CSS

About a code

Animated Text with mix-blend-mode

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Tushar Choudhari

Made with

  • HTML / CSS (SCSS)

About a code

Liquid Drop Using Gooey Effect

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

Responsive: no

Dependencies: -

Author

  • Cassie Evans

Made with

  • HTML / CSS

About a code

Multi-line Spanning Animated Underline

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

Responsive: no

Dependencies: -

Author

  • ilithya

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

Author

  • Ricardo Oliva Alonso

Made with

  • HTML / CSS (SCSS)

About a code

Text Animation

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

Responsive: no

Dependencies: -

Author

  • Tim Van Damme

Made with

  • HTML / CSS

About a code

Cartoon Type

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

Responsive: no

Dependencies: -

Author

  • Kyle Wetton

Made with

  • HTML / CSS (SCSS)

About a code

CSS 3D Text Effect

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

Responsive: no

Dependencies: -

Author

  • Eric Porter

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

Author

  • Franklin Castellanos

Made with

  • HTML / CSS (SCSS)

About a code

Luminance

background-clip text effect.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Kaio Almeida

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

Author

  • Alvaro Montoro

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

Author

  • Ryan Mulligan

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

Demo image: Text Animation 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

Dependencies: -

Demo image: Shining Text Animation Effects 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

Dependencies: -

Demo image: Animated Text Gradient 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

Dependencies: -

Demo image: Handwriting Animation Handwriting Animation - GIF Demo

Author

  • Marina

Made with

  • HTML / CSS

About the code

Handwriting Animation

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Pure CSS Text Animation 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

Dependencies: -

Demo image: Masking Path Animation 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-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: -

Demo image: HTML, CSS, and JS Letter Animation 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

Dependencies: -

Demo image: CSS Text Revealing Animation 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

Dependencies: -

Author

  • Scott Henderson

Made with

  • HTML (Slim) / CSS (SCSS)

About a code

Cinematic Text Animation. CSS only

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

Responsive: no

Dependencies: -

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

Dependencies: -

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

Dependencies: -

Demo image: Text Effect 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

Dependencies: -

Author

  • Callum Martin

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

Demo image: Animated Wave Clipped by Text 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

Dependencies: -

Demo image: Pure CSS Text Animation 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

Dependencies: -

Demo image: Impossibly Tipsy

Author

  • James Mellers

Made with

  • HTML / CSS

About the code

Impossibly Tipsy

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

Dependencies: -

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

Author

  • Claire Larsen

Made with

  • HTML / CSS

About the code

Text Animation: Montserrat

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

Dependencies: -

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

Dependencies: -

Demo image: CSS Only Random Text Transform 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

Dependencies: -

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

Dependencies: -

Demo image: Animated text-shadow Pattern 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

Dependencies: -

Demo image: Smoky Text 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

Dependencies: -

Demo image: Animated Text Fill Animated Text Fill - GIF Demo

Author

  • Daniel Riemer

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