70 CSS Text Effects

June 23, 2017

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

Update of January 2017 collection. 9 new items.

Table Of Contents:

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

Related Collections:

  1. Image Effects

3D Text

Demo Image: Single Element, Multi Coloured 3D Text Effect
Demo Image: Single Element, Multi Coloured 3D Text Effect

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

Demo Image: 3D CSS Typography
Demo Image: 3D CSS Typography

3D CSS Typography

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

Demo Image: CSS Text Stroke
Demo Image: CSS Text Stroke

CSS Text Stroke

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

Demo Image: 3D Extrude Text Effect
Demo Image: 3D Extrude Text Effect

3D Extrude Text Effect

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

Demo Image: 3D Text Effect - Mousemove
Demo Image: 3D Text Effect - Mousemove

3D Text Effect - Mousemove

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

Animated Text

Demo Image: Video Text
Demo Image: Video Text

Video Text

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

Demo Image: Text-Shadow Animate
Demo Image: Text-Shadow Animate

Text-Shadow Animate

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

Demo Image: Onion Skinning Text Morphing
Demo Image: Onion Skinning Text Morphing

Onion Skinning Text Morphing

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

Demo Image: Splitted Text Reveal
Demo Image: Splitted Text Reveal

Splitted Text Reveal

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

Demo Image: Animated Text Input
Demo Image: Animated Text Input

Animated Text Input

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

Demo Image: Animated Wave Clipped By Text
Demo Image: Animated Wave Clipped By Text

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

Demo Image: Break/Animate Warping Text Paragraph Example
Demo Image: Break/Animate Warping Text Paragraph Example

Break/Animate Warping Text Paragraph Example

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

Demo Image: Smoky Text
Demo Image: Smoky Text

Smoky Text

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

Demo Image: Bubbling Text Effect
Demo Image: Bubbling Text Effect

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

Demo Image: Animated Text Fill
Demo Image: Animated Text Fill

Animated Text Fill

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

Demo Image: Pure CSS Text Animation
Demo Image: Pure CSS Text Animation

Pure CSS Text Animation

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

Demo Image: Text Color Draw
Demo Image: Text Color Draw

Text Color Draw

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

Demo Image: Animating SVG Text
Demo Image: Animating SVG Text

Animating SVG Text

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

Demo Image: Shaded Text
Demo Image: Shaded Text

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

Demo Image: Text Animation Montserrat
Demo Image: Text Animation: Montserrat

Text Animation: Montserrat

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

Demo Image: Squiggly Text
Demo Image: Squiggly Text

Squiggly Text

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

Demo Image: Shattering Text Animation
Demo Image: Shattering Text Animation

Shattering Text Animation

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

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

Wave Text Effect (With SVG/Blend Mode)

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

Demo Image: GSAP Text Animation
Demo Image: GSAP Text Animation

GSAP Text Animation

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

Demo Image: Colorful Text Animation
Demo Image: Colorful Text Animation

Colorful Text Animation

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

Demo Image: Animated Text With Snap.svg
Demo Image: Animated Text With Snap.svg

Animated Text With Snap.svg

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

Demo Image: Animated Text Fill
Demo Image: Animated Text Fill

Animated Text Fill

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

Demo Image: SVG Path Animated Text
Demo Image: SVG Path Animated Text

SVG Path Animated Text

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

Demo Image: Animated Text-Shadow Pattern
Demo Image: Animated “Text-Shadow” Pattern

Animated “Text-Shadow” Pattern

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

Demo Image: Line Text
Demo Image: Line Text

Line Text

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

Glitch Text

Demo Image: Psycho Glitch (CSS variables & @keyframes)
Demo Image: Psycho Glitch (CSS variables & @keyframes)

Psycho Glitch (CSS variables & @keyframes)

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

Demo Image: VHS Text
Demo Image: VHS Text

VHS Text

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

Demo Image: Glitched Text
Demo Image: Glitched Text

Glitched Text

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

Demo Image: Glitch Text
Demo Image: Glitch Text

Glitch Text

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

Demo Image: Glitchy Text
Demo Image: Glitchy Text

Glitchy Text

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

Demo Image: Glitch
Demo Image: Glitch

Glitch

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

Demo Image: CSS-Only Glitch Effect
Demo Image: CSS-Only Glitch Effect

CSS-Only Glitch Effect

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

Demo Image: CSS Glitched Text By Skew
Demo Image: CSS Glitched Text By Skew

CSS Glitched Text By Skew

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

Hover Text

Demo Image: Focus Text Hover Effect
Demo Image: Focus Text Hover Effect

Focus Text Hover Effect

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

Demo Image: CSS Perspective Text Hover
Demo Image: CSS Perspective Text Hover

CSS Perspective Text Hover

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

Demo Image: 3D Hover Text Effect
Demo Image: 3D Hover Text Effect

3D Hover Text Effect

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

Demo Image: Animated Highlighted Text
Demo Image: Animated Highlighted Text

Animated Highlighted Text

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

Demo Image: Happy Text
Demo Image: Happy Text

Happy Text

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

Demo Image: Peeled Text Transforms
Demo Image: Peeled Text Transforms

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

Demo Image: Text-Mask Background Moving On MouseMove
Demo Image: Text-Mask Background Moving On MouseMove

Text-Mask Background Moving On MouseMove

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

Demo Image: Typography Text Neon
Demo Image: Typography Text Neon

Typography Text Neon

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

Rotating Text

Demo Image: 3D Quote Rotator
Demo Image: 3D Quote Rotator

3D Quote Rotator

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

Demo Image: Rotating Text
Demo Image: Rotating Text

Rotating Text

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

Demo Image: Vertically Rotating Text
Demo Image: Vertically Rotating Text

Vertically Rotating Text

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

Shadow Text

Demo Image: Text Shadow
Demo Image: Text Shadow

Text Shadow

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

Demo Image: Pretty Shadow
Demo Image: Pretty Shadow

Pretty Shadow

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

Demo Image: Second Shadow
Demo Image: Second Shadow

Second Shadow

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

Demo Image: Variable Longshadow With Gradients Mixin
Demo Image: Variable Longshadow With Gradients Mixin

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

Demo Image: Shadow Parallax
Demo Image: Shadow Parallax

Shadow Parallax

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

Demo Image: Awesome Text-Shadow
Demo Image: Awesome Text-Shadow

Awesome Text-Shadow

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

Demo Image: Text-Shadow
Demo Image: Text-Shadow

Text-Shadow

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

Demo Image: CSS Text Shadow
Demo Image: CSS Text Shadow

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

Demo Image: Long Shadow Gradient Mixin
Demo Image: Long Shadow Gradient Mixin

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

Demo Image: CSS3 Text-Shadow Effects
Demo Image: CSS3 Text-Shadow Effects

CSS3 Text-Shadow Effects

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

Demo Image: CSS Dashed Shadow
Demo Image: CSS Dashed Shadow

CSS Dashed Shadow

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

Typing Text

Demo Image: Typed Text
Demo Image: Typed Text

Typed Text

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

Demo Image: Auto Typing Text
Demo Image: Auto Typing Text

Auto Typing Text

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

Demo Image: LOVE Text Effect
Demo Image: LOVE Text Effect

LOVE Text Effect

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

Demo Image: Kinetic Type With Greensock
Demo Image: Kinetic Type With Greensock

Kinetic Type With Greensock

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

Demo Image: Text Scramble Effect
Demo Image: Text Scramble Effect

Text Scramble Effect

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

Demo Image: Transmission Glowing Text Animation
Demo Image: Transmission: Glowing Text Animation

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

Demo Image: Futuristic Resolving/Typing Text Effect
Demo Image: Futuristic Resolving/Typing Text Effect

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

Demo Image: Text Typing Thingamy
Demo Image: Text Typing Thingamy

Text Typing Thingamy

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

Demo Image: SVG Text: Animated Typing
Demo Image: SVG Text: Animated Typing

SVG Text: Animated Typing

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

Demo Image: Typing Text With Javascript
Demo Image: Typing Text With Javascript

Typing Text With Javascript

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

FreeFrontend © 2016 - 2017

Back to top