59 CSS Text Effects
Collection of free HTML and CSS text effect code examples: background, hover, rotating, typing, etc. Update of February 2018 collection. 8 new items.
- Hover Text
- Rotating Text
- Text Background
- Typing Text
- CSS Text Shadow Effects
- CSS Glow Text Effects
- CSS 3D Text Effects
- CSS Text Animations
- CSS Text Glitch Effects
Author
- Stefano Perelli
Made with
- HTML
- CSS
- JavaScript (jquery.js)
About the code
Letters Effect
Letters effect on scroll.
Author
- Sebastian DeRossi
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
Made with
- HTML
- CSS/LESS
- JavaScript (tweenmax.js)
About the code
Text Line Animation
Nice text line animation with TweenMax.js.
Author
- Dimitra Vasilopoulou
About the code
Silent Movie Text Effect
Movie text effect with canvas.
Author
- Cassie Evans
Made with
- HTML
- CSS
- JavaScript (anime.js)
About the code
SVG Text Animation
Nice SVG text animation.
Author
- Artur Sedlukha
Made with
- HTML/Pug
- CSS/SCSS
- JavaScript (tweenmax.js)
About the code
Text Reveal Animation
GSAP text reveal animation.
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
Splitted Text Reveal
HTML, CSS and JavaScript splitted text reveal.
Made by Fabio Ottaviani
June 6, 2017
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: 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: 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: Glitched Text
Glitched Text
HTML, CSS and JavaScript glitched text.
Made by Derek Palladino
October 17, 2016
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
Animating SVG Text
HTML, CSS and SVG animating text.
Made by Fabio Ottaviani
September 22, 2016
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: Second Shadow
Second Shadow
Styling text with SVG.
Made by Code School
April 21, 2016
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: Squiggly Text
Squiggly Text
Squiggly text experiment with SVG filters.
Made by Lucas Bebber
October 22, 2015
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: GSAP Text Animation
GSAP Text Animation
Text effect using Greensock.
Made by Nate Wiley
August 28, 2015
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
Animated Text With Snap.svg
Work with this feels like an old good Flash :)
Made by Yoksel
May 17, 2015
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: 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: 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: Line Text
Line Text
Animated text with HTML, CSS and JavaScript.
Made by Johan Fagerbeg
September 22, 2013
Demo Image: 3D Text Effect - Mousemove
3D Text Effect - Mousemove
Nice 3D Text effect with jQuery mousemove.
Made by Dennis Garrn
July 12, 2013
Author
- Genevieve
Made with
- HTML
- CSS/SCSS
- JavaScript/Babel
About the code
Blended Text Layers
Content generated with JS.
Author
- Nathan Taylo
About the code
Spring Text Hover Effect
Just playing around with effects for buttons and thought this was pretty cool.
Author
- Charlie Marcotte
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
Made with
- HTML
- CSS/SCSS
- JavaScript/Babel (polyfill.js)
About the code
Pretty Underline
Pretty underline hover effect.
Author
- Ragnar Þór Valgeirsson
About the code
Animated Underlines
Demo of an animated underline effect. Pure CSS animation.
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
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
3D Hover Text Effect
HTML, CSS and JavaScript 3d hover text effect.
Made by Sascha Sigl
november 20, 2015
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
Happy Text
HTML and CSS happy text effect.
Made by Bennett Feely
December 6, 2014
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
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
Typography Text Neon
Text design (typography) with neon effect.
Made by Prima Utama Apriansyah
March 6, 2014
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
Rotating Text
HTML, CSS and JavaScript rotating text.
Made by Rachel Smith
May 14, 2015
Demo Image: Vertically Rotating Text
Vertically Rotating Text
Vertically rotating text with HTML and CSS.
Made by Jacob
July 23, 2014
Author
- Mark Stickling
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
About the code
Moving Cloud Text
Moving cloud text with HTML and CSS.
Author
- Ines Montani
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
About the code
Text With Video Background
This demo explores creating knockout text/paths in SVG and looping a YouTube video as the fill.
About the code
Text Background
Text background clipping.
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.
Demo Image: Typed Text
Typed Text
HTML, CSS and JavaScript typed text.
Made by Alex
January 11, 2017
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
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
Kinetic Type With Greensock
Kinetic Type with HTML, CSS and JavaScript (Greensock).
Made by Nerdmanship
October 14, 2016
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
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
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
Text Typing Thingamy
HTML, CSS and JavaScript text typing thingamy.
Made by Jack Armley
May 22, 2015
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
Typing Text With Javascript
Typing text with HTML, CSS and Javascript.
Made by Max
May 19, 2014