FreeFrontend

61 CSS Text Effects

January 15, 2017 | 28 Minute Read

Collection of HTML and CSS text effects with little JavaScript: 3D, animated, glitch, hover, shadow, rotating and typing. Demo and download code (*zip).

3D Text

Demo Image: 3D CSS Typography
3D CSS Typography (demo image)

3D CSS Typography

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

download demo and code

See the Pen 3D CSS Typography 🔥 by Noah Blon (@noahblon) on CodePen.

Demo Image: CSS Text Stroke
CSS Text Stroke (demo image)

CSS Text Stroke

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

download demo and code
Demo Image: 3D Extrude Text Effect
3D Extrude Text Effect (demo image)

3D Extrude Text Effect

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

download demo and code

See the Pen 3D extrude text effect- CSS only by Pete Leidy (@pleidy) on CodePen.

Demo Image: 3D Text Effect - Mousemove
3D Text Effect - Mousemove (demo image)

3D Text Effect - Mousemove

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

download demo and code

See the Pen 3d Text effect - mousemove by Dennis Garrn (@dennisgarrn) on CodePen.

Animated Text

Demo Image: Animated Wave Clipped By Text
Animated Wave Clipped By Text (demo 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

download demo and code

See the Pen Animated wave clipped by text by web-tiki (@web-tiki) on CodePen.

Demo Image: Break/Animate Warping Text Paragraph Example
Break/Animate Warping Text Paragraph Example (demo image)

Break/Animate Warping Text Paragraph Example

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

download demo and code
Demo Image: Smoky Text
Smoky Text (demo image)

Smoky Text

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

download demo and code

See the Pen Smoky Text by Bennett Feely (@bennettfeely) on CodePen.

Demo Image: Bubbling Text Effect
Bubbling Text Effect (demo image)

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

download demo and code

See the Pen Bubbling Text Effect by html5andblog (@html5andblog) on CodePen.

Demo Image: Animated Text Fill
Animated Text Fill (demo image)

Animated Text Fill

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

download demo and code

See the Pen Animated text fill by Daniel Riemer (@zitrusfrisch) on CodePen.

Demo Image: Pure CSS Text Animation
Pure CSS Text Animation (demo image)

Pure CSS Text Animation

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

download demo and code

See the Pen Pure CSS Text Animation by Robin Treur (@RobinTreur) on CodePen.

Demo Image: Text Color Draw
Text Color Draw (demo image)

Text Color Draw

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

download demo and code

See the Pen text color draw by CJ Gammon (@cjgammon) on CodePen.

Demo Image: Animating SVG Text
Animating SVG Text (demo image)

Animating SVG Text

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

download demo and code

See the Pen Animating SVG text by Fabio Ottaviani (@supah) on CodePen.

Demo Image: Shaded Text
Shaded Text (demo image)

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

download demo and code

See the Pen Shaded Text by Rafael González (@rgg) on CodePen.

Demo Image: Text Animation Montserrat
Text Animation: Montserrat (demo image)

Text Animation: Montserrat

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

download demo and code

See the Pen Text Animation: Montserrat by Claire Larsen (@ClaireLarsen) on CodePen.

Demo Image: Squiggly Text
Squiggly Text (demo image)

Squiggly Text

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

download demo and code

See the Pen Squiggly Text by Lucas Bebber (@lbebber) on CodePen.

Demo Image: Shattering Text Animation
Shattering Text Animation (demo image)

Shattering Text Animation

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

download demo and code

See the Pen Shattering Text Animation by Arsen Zbidniakov (@ARS) on CodePen.

Demo Image: Wave Text Effect (With SVG/Blend Mode)
Wave Text Effect (With SVG/Blend Mode) (demo image)

Wave Text Effect (With SVG/Blend Mode)

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

download demo and code

See the Pen Wave text effect (with SVG/blend mode) by Lucas Bebber (@lbebber) on CodePen.

Demo Image: GSAP Text Animation
GSAP Text Animation (demo image)

GSAP Text Animation

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

download demo and code

See the Pen GSAP Text Animation by Nate Wiley (@natewiley) on CodePen.

Demo Image: Colorful Text Animation
Colorful Text Animation (demo image)

Colorful Text Animation

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

download demo and code
Demo Image: Animated Text With Snap.svg
Animated Text With Snap.svg (demo image)

Animated Text With Snap.svg

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

download demo and code

See the Pen Animated text with Snapsvg by yoksel (@yoksel) on CodePen.

Demo Image: Animated Text Fill
Animated Text Fill (demo image)

Animated Text Fill

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

download demo and code

See the Pen Animated text fill with svg text by Cesar C. (@cesar2535) on CodePen.

Demo Image: SVG Path Animated Text
SVG Path Animated Text (demo image)

SVG Path Animated Text

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

download demo and code

See the Pen SVG Path animated Text by Tamino Martinius (@Zaku) on CodePen.

Demo Image: Animated Text-Shadow Pattern
Animated "Text-Shadow" Pattern (demo image)

Animated "Text-Shadow" Pattern

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

download demo and code
Demo Image: Line Text
Line Text (demo image)

Line Text

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

download demo and code

See the Pen Line text. by Johan Fagerbeg (@birjolaxew) on CodePen.

Glitch Text

Demo Image: VHS Text
VHS Text (demo image)

VHS Text

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

download demo and code

See the Pen VHS text by Maria (@Shorina) on CodePen.

Demo Image: Glitched Text
Glitched Text (demo image)

Glitched Text

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

download demo and code

See the Pen Glitched Text (study of The Verge) by Derek Palladino (@derekjp) on CodePen.

Demo Image: Glitch Text
Glitch Text (demo image)

Glitch Text

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

download demo and code

See the Pen Glitch Text by zoite (@zoite) on CodePen.

Demo Image: Glitchy Text
Glitchy Text (demo image)

Glitchy Text

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

download demo and code

See the Pen Glitchy Text by Matt Stvartak (@mattstvartak) on CodePen.

Demo Image: Glitch
Glitch (demo image)

Glitch

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

download demo and code

See the Pen Glitch by Christian Petersen (@cbp) on CodePen.

Demo Image: CSS-Only Glitch Effect
CSS-Only Glitch Effect (demo image)

CSS-Only Glitch Effect

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

download demo and code

See the Pen CSS-Only Glitch Effect by Justin (@nilbog) on CodePen.

Demo Image: CSS Glitched Text By Skew
CSS Glitched Text By Skew (demo image)

CSS Glitched Text By Skew

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

download demo and code

See the Pen css glitched text by skew by naiting (@sliiice) on CodePen.

Hover Text

Demo Image: CSS Perspective Text Hover
CSS Perspective Text Hover (demo image)

CSS Perspective Text Hover

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

download demo and code

See the Pen CSS Perspective Text Hover by James Bosworth (@bosworthco) on CodePen.

Demo Image: 3D Hover Text Effect
3D Hover Text Effect (demo image)

3D Hover Text Effect

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

download demo and code

See the Pen 3d hover text effect by Sascha Sigl (@SaschaSigl) on CodePen.

Demo Image: Animated Highlighted Text
Animated Highlighted Text (demo image)

Animated Highlighted Text

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

download demo and code

See the Pen Animated highlighted text by Rian Ariona (@ariona) on CodePen.

Demo Image: Happy Text
Happy Text (demo image)

Happy Text

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

download demo and code

See the Pen Happy Text by Bennett Feely (@bennettfeely) on CodePen.

Demo Image: Peeled Text Transforms
Peeled Text Transforms (demo image)

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

download demo and code

See the Pen Peeled Text Transforms by Michiel Bijl (@Michiel) on CodePen.

Demo Image: Text-Mask Background Moving On MouseMove
Text-Mask Background Moving On MouseMove (demo image)

Text-Mask Background Moving On MouseMove

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

download demo and code

See the Pen Text-mask background moving on MouseMove - v2 by Robert Borghesi (@dghez) on CodePen.

Demo Image: Typography Text Neon
Typography Text Neon (demo image)

Typography Text Neon

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

download demo and code

See the Pen Efek Typography Text Neon part 1 by Prima Utama Apriansyah (@primaapriansyah) on CodePen.

Rotating Text

Demo Image: 3D Quote Rotator
3D Quote Rotator (demo image)

3D Quote Rotator

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

download demo and code

See the Pen #Codevember 3D Quote Rotator by Nate Wiley (@natewiley) on CodePen.

Demo Image: Rotating Text
Rotating Text (demo image)

Rotating Text

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

download demo and code

See the Pen Rotating text by Rachel Smith (@rachsmith) on CodePen.

Demo Image: Vertically Rotating Text
Vertically Rotating Text (demo image)

Vertically Rotating Text

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

download demo and code

Shadow Text

Demo Image: Pretty Shadow
Pretty Shadow (demo image)

Pretty Shadow

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

download demo and code

See the Pen Pretty shadow by Alex Moore (@MoorLex) on CodePen.

Demo Image: Second Shadow
Second Shadow (demo image)

Second Shadow

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

download demo and code
Demo Image: Variable Longshadow With Gradients Mixin
Variable Longshadow With Gradients Mixin (demo image)

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

download demo and code
Demo Image: Shadow Parallax
Shadow Parallax (demo image)

Shadow Parallax

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

download demo and code

See the Pen Shadow Parallax • Reactjs by Siamak Mokhtari (@siamak) on CodePen.

Demo Image: Awesome Text-Shadow
Awesome Text-Shadow (demo image)

Awesome Text-Shadow

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

download demo and code

See the Pen Awesome Text-Shadow by Nguyen Hoang Nam (@namho) on CodePen.

Demo Image: Text-Shadow
Text-Shadow (demo image)

Text-Shadow

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

download demo and code

See the Pen Text-Shadow by Mayur Elbhar (@mayurelbhar) on CodePen.

Demo Image: CSS Text Shadow
CSS Text Shadow (demo image)

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

download demo and code

See the Pen CSS Text Shadow by Chris Eisenbraun (@chriseisenbraun) on CodePen.

Demo Image: Long Shadow Gradient Mixin
Long Shadow Gradient Mixin (demo image)

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

download demo and code

See the Pen Long Shadow Gradient Mixin by roikles (@roikles) on CodePen.

Demo Image: CSS3 Text-Shadow Effects
CSS3 Text-Shadow Effects (demo image)

CSS3 Text-Shadow Effects

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

download demo and code

See the Pen CSS3 text-shadow effects by Jorge Epuñan (@juanbrujo) on CodePen.

Demo Image: CSS Dashed Shadow
CSS Dashed Shadow (demo image)

CSS Dashed Shadow

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

download demo and code

See the Pen CSS Dashed Shadow by Lucas Bebber (@lbebber) on CodePen.

Typing Text

Demo Image: Typed Text
Typed Text (demo image)

Typed Text

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

download demo and code

See the Pen Typed Text by Alex (@alexpopovich) on CodePen.

Demo Image: Auto Typing Text
Auto Typing Text (demo image)

Auto Typing Text

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

download demo and code

See the Pen Auto Typing Text (function) by Connor Gaunt (@ConnorGaunt) on CodePen.

Demo Image: LOVE Text Effect
LOVE Text Effect (demo image)

LOVE Text Effect

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

download demo and code

See the Pen LOVE Text Effect by Matthew Wagerfield (@wagerfield) on CodePen.

Demo Image: Kinetic Type With Greensock
Kinetic Type With Greensock (demo image)

Kinetic Type With Greensock

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

download demo and code

See the Pen Kinetic Type with Greensock by Nerdmanship (@nerdmanship) on CodePen.

Demo Image: Text Scramble Effect
Text Scramble Effect (demo image)

Text Scramble Effect

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

download demo and code

See the Pen Text Scramble Effect by Justin Windle (@soulwire) on CodePen.

Demo Image: Transmission Glowing Text Animation
Transmission: Glowing Text Animation (demo image)

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

download demo and code

See the Pen Transmission: Glowing Text Animation by Stephen Scaff (@StephenScaff) on CodePen.

Demo Image: Futuristic Resolving/Typing Text Effect
Futuristic Resolving/Typing Text Effect (demo image)

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

download demo and code
Demo Image: Text Typing Thingamy
Text Typing Thingamy (demo image)

Text Typing Thingamy

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

download demo and code

See the Pen Text typing thingamy by Jack Armley (@jackarmley) on CodePen.

Demo Image: SVG Text: Animated Typing
SVG Text: Animated Typing (demo image)

SVG Text: Animated Typing

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

download demo and code

See the Pen SVG Text: Animated Typing by Tiffany Rayside (@tmrDevelops) on CodePen.

Demo Image: Typing Text With Javascript
Typing Text With Javascript (demo image)

Typing Text With Javascript

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

download demo and code

See the Pen Typing Text with Javascript by Max (@MyXoToD) on CodePen.