42 CSS Text Animations

About a code

Neon Lights

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Rainbow Effect

Animated text with rainbow effect.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Line Through Effect 3D

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Animated Neon Text

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

Responsive: no

Dependencies: -

About a code

Pure CSS Glitch Experiment

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Glowing Text

Glowing text using CSS keyframes.

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

Responsive: no

Dependencies: -

About a code

Animated Text with mix-blend-mode

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Liquid Drop Using Gooey Effect

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

Responsive: no

Dependencies: -

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

About a code

Text Animation

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

Responsive: no

Dependencies: -

About a code

Cartoon Type

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

Responsive: no

Dependencies: -

About a code

CSS 3D Text Effect

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

Responsive: no

Dependencies: -

About a code

Word Swipe Animation

Word carousel in pure CSS.

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

Responsive: no

Dependencies: -

About a code

Luminance

background-clip text effect.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

FadeIn Text with Bars

Pure CSS fadein text with bars.

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

Responsive: no

Dependencies: -

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

About a code

CSS Neon Sign

Pure CSS neon sign.

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

Responsive: no

Dependencies: -

About a code

Apple Commercial Animation

Recreating the iPad Commercial Animation with CSS.

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

Responsive: yes

Dependencies: -

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

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 a code

Liquid Type

Creating a "wave" liquid effect on type using SVG mask.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

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