Collection of hand-picked free HTML and CSS text animation code examples.

TEXT ANIMATION

Text animation in HTML, CSS and JS.Made with HTML / CSS / JavaScript by  Keny Zachelin.

demo and code

SHINING TEXT ANIMATION EFFECTS

Shining text animation effect in HTML and CSS.Made with HTML / CSS by FrankieDoodie

demo and code

ANIMATED TEXT GRADIENT

Pure CSS animated text gradient.Made with HTML / CSS by chrishodges

demo and code

HANDWRITING ANIMATION

Made with HTML / CSS by Marina

demo and code

PURE CSS TEXT ANIMATION

Made with HTML / CSS by Arlina Design

demo and 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.

demo and code

CSS ONLY FROZEN TEXT

CSS only animated frozen text effect with background-clipmix-blend-mode and gradient text. JS is to make the text editable for demo purpose, not required for the effect.

demo and code

HTML, CSS AND JS LETTER ANIMATION

Animating letters with CSS.

demo and code

CSS TEXT REVEALING ANIMATION

Very clean CSS3 text revealing animation.

demo and code

SVG VIDEO MASK ON TEXT

Made with HTML / CSS (SCSS) by Simon Evans

demo and code

TEXT SHADOW ANIMATE

Made with HTML / CSS (SCSS) by Wyatt Nolen


demo and code

TEXT EFFECT

Cool animated text effect.Made with HTML / CSS Hakkam Abdullah.

demo and code

ANIMATED WAVE CLIPPED BY TEXT

Animated wave inside text with SVG. Image in the background and gradient filling the wave.Made with HTML / CSS by web-tiki

demo and code

PURE CSS TEXT ANIMATION

Text animation in HTML and CSS.Made with HTML / CSS (SCSS) by Robin Treur

demo and code

IMPOSSIBLY TIPSY

Made with HTML / CSS by James Mellers

demo and code

TEXT ANIMATION: MONTSERRAT

Made with HTML / CSS by Claire Larsen

demo and code

WAVE TEXT EFFECT

Wave text effect with SVG/blend mode.Made with HTML / CSS (Stylus) by Lucas Bebber

demo and code

CSS ONLY RANDOM TEXT TRANSFORM

Generate random text transformation using CSS only. Made with HTML (Pug) / CSS (SCSS) by lefoy

demo and code

ANIMATED TEXT

Animated text fill with SVG.Made with HTML (Pug) / CSS (SCSS) by Cesar C

demo and code

ANIMATED TEXT-SHADOW PATTERN

Uses background-clip: text & linear-gradient to simulate striped text shadow.Made with HTML / CSS by carpe numidium

demo and code

SMOKY TEXT

Combining text-shadow and CSS transforms (especially skew) for a smoky (or smokey?) effect.Made with HTML / CSS (SCSS) by Bennett Feely

demo and code

ANIMATED TEXT FILL

Fill your text with animated background images – no JavaScript required Made with HTML / CSS (SCSS) by Daniel Riemer

demo and code