103 CSS Text Effects

Collection of free HTML and CSS text effect code examples: 3D, animated, background, glitch, hover, shadow, rotating, typing, etc. Update of February 2018 collection. 8 new items.

Table of Contents:

1. 3D Text
2. Animated Text
3. Glitch Text
4. Hover Text
5. Rotating Text
6. Shadow Text
7. Text Background
8. Typing Text

3D Text

Author

• Comehope (张偶)
• April 28, 2018

Links

• demo and code

Made with

• HTML / CSS

About the code

Marquee Effects

3D text marquee effects.

Author

• Paul Grant
• April 5, 2018

Links

• demo and code

Made with

• HTML / CSS (SCSS)

About the code

Skewed and Rotated Text

Text with CSS skew() and rotate().

Author

• Yusuke Nakaya
• December 4, 2017

Links

• demo and code

Made with

• HTML (Pug) / CSS (SCSS)

About the code

Text Wave

Only CSS text wave.

Single Element, Multi Coloured 3D Text Effect

Single element with multi coloured text and 3D text shadow effects. Just playing around with different CSS properties to create fun text effects.
Made by Mandy Michael
June 8, 2017

3D CSS Typography

3D CSS typography with HTML and CSS(SCSS).
Made by Noah Blon
January 6, 2017

CSS Text Stroke

Change the text to see the animation again.
Made by Ignacio Correia
April 27, 2015

3D Extrude Text Effect

HTML and CSS 3D extrude text effect
Made by Pete Leidy
June 29, 2014

3D Text Effect - Mousemove

Nice 3D Text effect with jQuery mousemove.
Made by Dennis Garrn
July 12, 2013

Animated Text

Author

• chrishodges
• June 8, 2018

Links

• demo and code

Made with

• HTML / CSS

About the code

Animated Text Gradient

Nice animated text with gradient.

Author

• Marina
• June 8, 2018

Links

• demo and code

Made with

• HTML / CSS

About the code

Handwriting Animation

SVG and CSS handwriting animation. In order to optimize the SVG for animation, the graphic was chopped up into smaller pieces. This was done primarily to prevent path elements from overlapping with unrelated clipPath elements, but also allowed finer control over the animation. All of the animated path elements were exported from Adobe Illustrator and fine-tuned with code.

Author

• Envato Tuts+
• February 14, 2018

Links

• demo and code

Made with

• HTML
• CSS

About the code

Masking Path Animation

Sometimes simple is just as effective as complex.

Author

• Stefano Perelli
• February 11, 2018

Links

• demo and code

Made with

• HTML
• CSS
• JavaScript (jquery.js)

About the code

Letters Effect

Letters effect on scroll.

Author

• Mandy Michael
• January 17, 2018

Links

• demo and code

Made with

• HTML
• CSS/SCSS
• JavaScript

About the code

CSS Only Frozen Text

CSS only frozen text effect with background-clip, blend modes and gradient text.

Author

• Sebastian DeRossi
• January 7, 2018

Links

• demo and code

Made with

• HTML
• CSS
• JavaScript (createjs.js)

About the code

Fun Text

Click to re-draw! Mapping sprites to text is always fun.

Author

• John Healey
• September 25, 2017

Links

• demo and code

Made with

• HTML
• CSS/LESS
• JavaScript (tweenmax.js)

About the code

Text Line Animation

Nice text line animation with TweenMax.js.

Author

• Florin Pop
• September 6, 2017

Links

• demo and code

Made with

• HTML
• CSS
• JavaScript

About the code

Letter Animation

Animating letters with CSS.

Author

• Nooray Yemon
• August 28, 2017

Links

• demo and code

Made with

• HTML
• CSS

About the code

Text Revealing Animation

Pure CSS text revealing animation.

Author

• Dimitra Vasilopoulou
• July 27, 2017

Links

• demo and code

Made with

• HTML
• CSS
• JavaScript

About the code

Silent Movie Text Effect

Movie text effect with canvas.

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.

Author

• Cassie Evans
• July 17, 2017

Links

• demo and code

Made with

• HTML
• CSS
• JavaScript (anime.js)

About the code

SVG Text Animation

Nice SVG text animation.

Author

• Artur Sedlukha
• July 15, 2017

Links

• demo and code

Made with

• HTML/Pug
• CSS/SCSS
• JavaScript (tweenmax.js)

About the code

Text Reveal Animation

GSAP text reveal animation.

Video Text

SVG video mask on text.
Made by Simon Evans
June 20, 2017

Text-Shadow Animate

Text-Shadow animate with HTML and CSS.
Made by Wyatt Nolen
June 15, 2017

Onion Skinning Text Morphing

Onion skinning text morphing in HTML/CSS/JS.
Made by John Healey
June 14, 2017

Splitted Text Reveal

HTML, CSS and JavaScript splitted text reveal.
Made by Fabio Ottaviani
June 6, 2017

Animated Text Input

Animated text with HTML, CSS and JS.
Made by Bình Cao
May 19, 2017

Author

• Hakkam Abdullah
• May 17, 2017

Links

• demo and code

Made with

• HTML
• CSS

About the code

Text Effect

Animated text with GIF image.

Animated Wave Clipped By Text

Animated wave inside text with svg. Image in the background and gradient filling the wave.
Made by web-tiki
January 5, 2017

Break/Animate Warping Text Paragraph Example

HTML, CSS and JavaScript break/animate warping text paragraph example.
Made by James
January 2, 2017

Smoky Text

Combining text-shadow and CSS transforms (especially skew) for a smoky (or smokey?) effect.
Made by Bennett Feely
January 1, 2017

Bubbling Text Effect

A jQuery powered example of how you can create a bubbling effect on a HTML heading. The bubbles appear as though they’re coming from behind the text, and then fade out and are removed.
Made by html5andblog
December 1, 2016

Animated Text Fill

Fill your text with animated background images - no JavaScript required.
Made by Daniel Riemer
November 19, 2016

Pure CSS Text Animation

HTML and CSS text animation.
Made by Robin Treur
October 29, 2016

Text Color Draw

Path drawing of text using greensock’s drawSVG plugin.
Made by CJ Gammon
October 15, 2016

Animating SVG Text

HTML, CSS and SVG animating text.
Made by Fabio Ottaviani
September 22, 2016

Shaded Text

Shaded text, a SVG + CSS3 experiment about animated shadows. It isn’t optimized for mobile devices… yet.
Made by Rafael González
September 16, 2016

Text Animation: Montserrat

HTML and CSS text animation.
Made by Claire Larsen
January 19, 2016

Squiggly Text

Squiggly text experiment with SVG filters.
Made by Lucas Bebber
October 22, 2015

Shattering Text Animation

GSAP text animation. SVG path shattering. Slow motion on hover.
Made by Arsen Zbidniakov
September 17, 2015

Wave Text Effect (With SVG/Blend Mode)

Wave text effect with HTML and CSS.
Made by Lucas Bebber
September 4, 2015

GSAP Text Animation

Text effect using Greensock.
Made by Nate Wiley
August 28, 2015

Colorful Text Animation

Fluid and configurable colorful text animation module made with SCSS.
Made by Hendry Sadrak
July 27, 2015

Author

• James Mellers
• June 8, 2016

Links

• demo and code

Made with

• HTML
• CSS

About the code

Impossibly Tipsy

Interesting effect for text.

Animated Text With Snap.svg

Work with this feels like an old good Flash :)
Made by Yoksel
May 17, 2015

Animated Text Fill

Animated text fill with HTML(Pug), CSS(SCSS) and SVG.
Made by Cesar C.
February 17, 2015

SVG Path Animated Text

Animated the text “Design” based on one SVG path. Click to toggle animation
Made by Tamino Martinius
August 14, 2014

Animated “Text-Shadow” Pattern

Uses -webkit-background-clip: text & linear-gradient to simulate striped text shadow.
Made by carpe numidium
December 21, 2013

Line Text

Animated text with HTML, CSS and JavaScript.
Made by Johan Fagerbeg
September 22, 2013

Glitch Text

Author

• Luke Meyrick
• August 29, 2017

Links

• demo and code

Made with

• HTML/Pug
• CSS/SCSS

About the code

Simple Text Glitch

Pure CSS simple text glitch.

Psycho Glitch (CSS variables & @keyframes)

The “glitch” effect, recreated with animated CSS custom properties. Pure CSS.
Made by Alex N
May 29, 2017

VHS Text

VHS text with HTML, CSS and JavaScript.
Made by Maria
January 12, 2017

Glitched Text

HTML, CSS and JavaScript glitched text.
Made by Derek Palladino
October 17, 2016

Glitch Text

HTML(Pug) and CSS(SCSS) glitch text.
Made by zoite
September 30, 2016

Glitchy Text

Glitchy text with HTML and CSS(SCSS).
Made by Matt Stvartak
September 27, 2016

Glitch

Glitch text with HTML and CSS.
Made by Christian Petersen
May 6, 2016

CSS-Only Glitch Effect

Glitch sort of effect with CSS animation.
Made by Justin
February 5, 2015

CSS Glitched Text By Skew

HTML and CSS glitched text by skew.
Made by naiting
September 3, 2014

Hover Text

Author

• Genevieve
• November 14, 2017

Links

• demo and code

Made with

• HTML
• CSS/SCSS
• JavaScript/Babel

About the code

Blended Text Layers

Content generated with JS.

Author

• Nathan Taylo
• September 15, 2017

Links

• demo and code

Made with

• HTML
• CSS/SCSS

About the code

Spring Text Hover Effect

Just playing around with effects for buttons and thought this was pretty cool.

Author

• Charlie Marcotte
• August 16, 2017

Links

• demo and code

Made with

• HTML/Pug
• CSS/Sass

About the code

Simple CSS Hover Effect Using Sass Loops

Simple little hover animation. Sass loops make staggering animation delays really easy to do...you can get a lot of mileage out of them.

Author

• Will King
• August 15, 2017

Links

• demo and code

Made with

• HTML
• CSS/SCSS
• JavaScript/Babel (polyfill.js)

About the code

Pretty Underline

Pretty underline hover effect.

Author

• Ragnar Þór Valgeirsson
• July 12, 2017

Links

• demo and code

Made with

• HTML
• CSS/SCSS

About the code

Animated Underlines

Demo of an animated underline effect. Pure CSS animation.

Focus Text Hover Effect

Hover CSS effect for text.
Made by Cameron Fitzwilliam
June 13, 2017

CSS Perspective Text Hover

An experiment using webfonts in combination with CSS 3D transform tools.
Made by James Bosworth
August 22, 2016

3D Hover Text Effect

HTML, CSS and JavaScript 3d hover text effect.
Made by Sascha Sigl
november 20, 2015

Animated Highlighted Text

The idea is simple, it make used of linear gradient and transition.
Made by Rian Ariona
February 19, 2015

Happy Text

HTML and CSS happy text effect.
Made by Bennett Feely
December 6, 2014

Peeled Text Transforms

This pen shows text that looks like it is peeled of the page. It has a smooth animation when hovered.
Made by Michiel Bijl
November 25, 2014

Text-Mask Background Moving On MouseMove

Trying the new feature “background-clip: text”, with background moving.
Made by Robert Borghesi
September 23, 2014

Typography Text Neon

Text design (typography) with neon effect.
Made by Prima Utama Apriansyah
March 6, 2014

Rotating Text

3D Quote Rotator

Using GreenSock and the SplitText plugin to create a 3D text effect.
Made by Nate Wiley
November 9, 2015

Rotating Text

HTML, CSS and JavaScript rotating text.
Made by Rachel Smith
May 14, 2015

Vertically Rotating Text

Vertically rotating text with HTML and CSS.
Made by Jacob
July 23, 2014

Shadow Text

Author

• Daniel Gonzalez
• February 15, 2018

Links

• demo and code

Made with

• HTML/Pug
• CSS/SCSS

About the code

Groovy CSS Effect

1960's font effect using CSS text-shadow property along with SASS function and mixins to keep code DRY.

Author

• agathaco
• June 9, 2017

Links

• demo and code

Made with

• HTML (Pug) / CSS (SCSS)

About the code

Text Shadow

Fancy text shadow.

Text Shadow

Pure CSS text shadow.
Made by IMarty
June 6, 2017

Pretty Shadow

Pretty shadow with HTML and CSS.
Made by Alex Moore
August 24, 2016

Second Shadow

Styling text with SVG.
Made by Code School
April 21, 2016

Variable Longshadow With Gradients Mixin

“Your scientists were so preoccupied with whether or not they could, they didn’t stop to think if they should.” This doesn’t need to exist. But now you can define long shadows with different colors and spreads with one Sass mixin.
Made by Dario Corsi
April 15, 2016

Author

• Erik Jung
• February 28, 2016

Links

• demo and code

Made with

• HTML
• CSS
• JavaScript

About the code

Neon Text-Shadow Effect

9 neon CSStext-shadow effects.

Shadow Parallax

Move your Mouse and Play words. Written by React, ES6, Babel transpiler.
Made by Siamak Mokhtari
January 9, 2016

Awesome Text-Shadow

Awesome text-shadow with CSS3.
Made by Nguyen Hoang Nam
February 9, 2015

Text-Shadow

HTML and CSS text-shadow.
Made by Mayur Elbhar
November 13, 2014

CSS Text Shadow

Taking a stab at a Lynda.com tutorial. CSS: Advanced Typographic Techniques using lettering.js
Made by Chris Eisenbraun
September 30, 2014

Long Shadow Gradient Mixin

A Sass (Scss) Mixin to quickly generate long shadow gradients. Suitable for both ‘text-shadow’ and ‘box-shadow’.
Made by roikles
May 20, 2014

CSS3 Text-Shadow Effects

HTML and CSS3 text-shadow effects.
Made by Jorge Epuñan
January 14, 2014

CSS Dashed Shadow

Pure css hipster-ish typographic dashed shadow.
Made by Lucas Bebber
November 8, 2013

Text Background

Author

• Mark Stickling
• June 22, 2018

Links

• demo and code

Made with

• HTML / CSS (SCSS)

About the code

CSS Attempts at Text with Inline Skewed Background

Using skew is only rendered if the item is display: block or inline-block. Some of these look the same on a wide viewport but fail differently as the viewport width is decreased.

Author

• Cameron Fitzwilliam
• March 4, 2018

Links

• demo and code

Made with

• HTML / CSS

About the code

Moving Cloud Text

Moving cloud text with HTML and CSS.

Author

• Ines Montani
• December 25, 2017

Links

• demo and code

Made with

• HTML
• CSS

About the code

Gooey Text Background With SVG Filters

Example of using a gooey SVG filter to create smooth edges around inline text with a background.

Author

• Daniel Yuschick
• August 18, 2017

Links

• demo and code

Made with

• HTML
• CSS/SCSS

About the code

Text With Video Background

This demo explores creating knockout text/paths in SVG and looping a YouTube video as the fill.

Author

• Stephanie
• May 31, 2017

Links

• demo and code

Made with

• HTML
• CSS/SCSS

About the code

Text Background

Text background clipping.

Typing Text

Author

• Van Huynh
• July 19, 2017

Links

• demo and code

Made with

• HTML
• CSS/SCSS
• JavaScript (jquery.js)

About the code

Typing Effect

Typing effect for text made with a simple JQuery function. Simply call the function with the element you wish to animate as the first argument and the animation speed as the second argument.

Typed Text

HTML, CSS and JavaScript typed text.
Made by Alex
January 11, 2017

Auto Typing Text

Auto typing text with HTML, CSS and JavaScript.
Made by Connor Gaunt
November 8, 2016

LOVE Text Effect

Scrambled text effect inspired by the award winning Science Fiction film “LOVE”.
Made by Matthew Wagerfield
November 2, 2016

Kinetic Type With Greensock

Kinetic Type with HTML, CSS and JavaScript (Greensock).
Made by Nerdmanship
October 14, 2016

Text Scramble Effect

A little text decoding/scramble effect.
Made by Justin Windle
July 6, 2016

Transmission: Glowing Text Animation

A little glowing text animation. First, some JS to wrap each letter in a span. Then a keyframe animation, with animation-delay mixin, lights up each letter in succession.
Made by Stephen Scaff
June 25, 2016

Futuristic Resolving/Typing Text Effect feat. GLaDOS

Futuristic resolving/typing text effect usually found in game or movie cut scenes to reveal text on screen.
Made by Kevin
November 28, 2015

Text Typing Thingamy

HTML, CSS and JavaScript text typing thingamy.
Made by Jack Armley
May 22, 2015

SVG Text: Animated Typing

HTML, CSS and SVG animated typing.
Made by Tiffany Rayside
February 12, 2015

Typing Text With Javascript

Typing text with HTML, CSS and Javascript.
Made by Max
May 19, 2014