March 4, 2020

42 CSS Text Animations

Collection of hand-picked free HTML and CSS text animation code examples. Update of December 2018 collection. 20 new items.

Related Articles

Author Cooper

February 25, 2020 Links demo and code Made with HTML / CSS (SCSS) About a code Neon Lights Compatible browsers: Chrome, Firefox, Opera, Safari Responsive: no Dependencies: -

Author Mateus Generoso

February 24, 2020 Links demo and code 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

February 8, 2020 Links demo and code 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

February 3, 2020 Links demo and code Made with HTML / CSS About a code Animated Neon Text Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: -

Author Tee Diang

January 29, 2020 Links demo and code Made with HTML / CSS (SCSS) About a code Pure CSS Glitch Experiment Compatible browsers: Chrome, Firefox, Opera, Safari Responsive: no Dependencies: -

Author Amber Martineau

January 26, 2020 Links demo and code 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

December 13, 2019 Links demo and code 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

November 25, 2019 Links demo and code Made with HTML / CSS (SCSS) About a code Liquid Drop Using Gooey Effect Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: -

Author ilithya

October 22, 2019 Links demo and code 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

October 14, 2019 Links demo and code Made with HTML / CSS (SCSS) About a code Text Animation Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: -

Author Tim Van Damme

September 27, 2019 Links demo and code Made with HTML / CSS About a code Cartoon Type Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: -

Author Kyle Wetton

September 26, 2019 Links demo and code 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

September 18, 2019 Links demo and code 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

August 29, 2019 Links demo and code 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

June 27, 2019 Links demo and code

youtube video 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 Piotr Galor

June 18, 2019 Links demo and code 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: -

Author Ananya Neogi

June 13, 2019 Links demo and code Made with HTML / CSS About a code CSS Neon Sign Pure CSS neon sign. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: -

Author Alvaro Montoro

May 12, 2019 Links demo and code

tutorial 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 Brandon McConnell

March 7, 2019 Links demo and code 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: -

Author Keny Zachelin

November 30, 2018 Links demo and code 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: -

Author FrankieDoodie

October 13, 2018 Links demo and code 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: -

Author chrishodges

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

Author Marina

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

Author Arlina Design

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

Author Envato Tuts+

February 14, 2018 Links demo and code

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

Author Mandy Michael

January 17, 2018 Links demo and code 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: -

Author Florin Pop

September 6, 2017 Links demo and code 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: -

Author Nooray Yemon

August 28, 2017 Links demo and code 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 Simon Evans

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

Author Wyatt Nolen

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

Author Hakkam Abdullah

May 17, 2017 Links demo and code Made with HTML / CSS About the code Text Effect Cool animated text effect. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Dependencies: -

Author Callum Martin

April 26, 2017 Links demo and code 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: -

Author web-tiki

January 2, 2017 Links demo and code 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: -

Author Robin Treur

September 10, 2016 Links demo and code 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: -

Author James Mellers

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

Author Claire Larsen

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

Author Lucas Bebber

September 1, 2015 Links demo and code 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: -

Author lefoy

July 26, 2015 Links demo and code 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: -

Author Cesar C.

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

Author carpe numidium

December 21, 2013 Links demo and code 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: -

Author Bennett Feely

August 2, 2013 Links demo and code 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: -