55+ CSS Text Animations - Free Code + Demos
Collection of 55+ CSS Text Animations. All items are 100% free and open-source.
1. Neon Lights
Author: Cooper (cooper5)
Links: Source Code / Demo
Created on: February 24, 2020
Made with: HTML, SCSS
Tags: cpc-color, codepenchallenge, neon, css
2. Rainbow Effect
Author: Mateus Generoso (mtsgeneroso)
Links: Source Code / Demo
Created on: February 24, 2020
Made with: HTML, SCSS, JS
Tags: cpc-color, cpc-colors, rainbow, codepenchallenge, css
3. Line Through Effect 3D
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: February 8, 2020
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: 3d, transform, animation, sass, jade
4. Animated Neon Text
Author: Tee Diang (acupoftee)
Links: Source Code / Demo
Created on: February 2, 2020
Made with: HTML, CSS
5. Pure CSS Glitch Experiment
Author: Tee Diang (acupoftee)
Links: Source Code / Demo
Created on: January 28, 2020
Made with: HTML, SCSS
6. Glowing Text, Music Inspired
glowing text using CSS keyframes, inspired by good feelings, a good song, and a tattoo 🤘
Author: amber (ambermdesign)
Links: Source Code / Demo
Created on: January 25, 2020
Made with: HTML, SCSS
Tags: music inspired
7. Mix-blend-mode
Author: Cassandra Rossall (cassandraPaige)
Links: Source Code / Demo
Created on: December 13, 2019
Made with: HTML, CSS
8. Liquid Drop Using Gooey Effect
Author: Tushar Choudhari (tush23ar)
Links: Source Code / Demo
Created on: November 25, 2019
Made with: HTML, SCSS
9. Spooky Typo
Experimenting with a CSS blur filter, text-shadow, and transform skew effects animated. Pause the animation on typo mouseover, not fog. On mobile touch typo to pause and touch anywhere else on the screen to run it again. Firefox mouseover/touch is not as smooth though x.x Prefers-reduce...Read More
Author: ilithya (ilithya)
Links: Source Code / Demo
Created on: October 22, 2019
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: typography, cssvariables, resize, animation, motion
10. Spacious
Author: Ricardo Oliva Alonso (ricardoolivaalonso)
Links: Source Code / Demo
Created on: October 14, 2019
Made with: HTML, SCSS
Tags: cpc-small-big, animation, text
11. Cartoon Type
Author: Tim Van Damme (maxvoltar)
Links: Source Code / Demo
Created on: September 27, 2019
Made with: HTML, CSS
12. CSS 3D Text Effect
I'm sure I saw this posted somewhere? Can't find it, so made it myself
Author: Kyle Wetton (kylewetton)
Links: Source Code / Demo
Created on: September 26, 2019
Made with: HTML, SCSS
Tags: css
13. Word Swipe Animation
Author: Eric Porter (EricPorter)
Links: Source Code / Demo
Created on: September 18, 2019
Made with: HTML, SCSS
14. Luminance
Background-clip text effect inspired by Astral Throb's Coding to synthwave music really gets me in the flow. Check it out @ youtube.com/channel/UCpbH_7H71IPKq4eH7CD5spg
Author: Franklin Castellanos (onecastell)
Links: Source Code / Demo
Created on: August 29, 2019
Made with: HTML, SCSS
15. Pure CSS | FadeIn Text With Bars | KeyFrames & Scss
Author: Kaio Almeida (KaioRocha)
Links: Source Code / Demo, Youtube Video
Created on: June 27, 2019
Made with: HTML, SCSS
16. Clean CSS Glitch
Lightweight text glitch effect, animating nothing but transform property
Author: Piotr Galor (pgalor)
Links: Source Code / Demo
Created on: June 18, 2019
Made with: HTML, CSS
Tags: glitch, glitchy text, single-div, css, 404
17. CSS Neon Sign
Pure CSS Neon Sign
Author: Ananya Neogi (ananyaneogi)
Links: Source Code / Demo
Created on: June 13, 2019
Made with: HTML, CSS, JS
Tags: css, neonsign, text-shadow
18. Typed.scss: CSS-powered Animated Text
Look ma! No H(TML)andlebars... or JS Typed.js ported entirely to CSS (SCSS)
Author: Brandon McConnell (brandonmcconnell)
Links: Source Code / Demo
Created on: March 6, 2019
Made with: SCSS
Tags: typed, no-js, css-only, creative, simulate
19. Text Animation 2
Author: Keny Zachelin (kazed972)
Links: Source Code / Demo
Created on: November 30, 2018
Made with: HTML, CSS, JS
20. Shining Text Animation Effects
Shining Text Animation Effects
Author: FrankieDoodie (FrankieDoodie)
Links: Source Code / Demo
Created on: October 13, 2018
Made with: HTML, CSS
Tags: shining, text, animation, effect
21. Animated Text Gradient
Author: chrishodges (chrishodges27)
Links: Source Code / Demo
Created on: June 8, 2018
Made with: HTML, CSS
22. Handwriting Animation
My name animated for personal branding. This piece started out as a sketch on the iPad Pro using an Apple Pencil and Procreate. From there, it was converted into a single vector graphic using Adobe Illustrator. In order to optimize the SVG for animation, the graphic was chopped up i...Read More
Author: Marina (marinamcpeak)
Links: Source Code / Demo
Created on: June 7, 2018
Made with: HTML, CSS
Tags: handwritten, handwriting, svg, animation, css
23. Pure CSS Text Animation
Pure CSS Text Animation
Author: Arlina Code (arlinadesign)
Links: Source Code / Demo
Created on: May 25, 2018
Made with: HTML, CSS
Tags: css, html
24. Masking Path Animation
From diagramatics. Check out the full tutorial on Envato Tuts+.
Author: Envato Tuts+ (tutsplus)
Links: Source Code / Demo, Tutorial
Created on: February 14, 2018
Made with: HTML, CSS
25. CSS Only Frozen Text
CSS only frozen text effect with background-clip, blend modes and gradient text.
Author: Mandy Michael (mandymichael)
Links: Source Code / Demo
Created on: January 17, 2018
Made with: HTML, SCSS, JS
Tags: css, background-clip, blend-modes, gradient-text, text-effects
26. Letter Animation
Animating letters with CSS.
Author: Florin Pop (FlorinPop17)
Links: Source Code / Demo
Created on: September 6, 2017
Made with: HTML, CSS, JS
Tags: css, animation, letter animations
27. CSS TEXT REVEALING ANIMATION
Author: Nooray Yemon (yemon)
Links: Source Code / Demo
Created on: August 28, 2017
Made with: HTML, CSS, JS
28. SVG Video Mask On Text
SVG video mask on text
Author: Simon Evans (SimonEvans)
Links: Source Code / Demo
Created on: June 16, 2017
Made with: HTML, SCSS, JS
Tags: svg, mask, video, animated, typography
29. Text-Shadow Animate
Author: Wyatt Nolen (wyattnolen)
Links: Source Code / Demo
Created on: June 9, 2017
Made with: HTML, SCSS
Tags: text-shadow, rainbow, css-only, sass-function
30. Text Effect
Author: Lucas Bebber (lbebber)
Links: Source Code / Demo
Created on: September 1, 2015
Made with: HTML, Stylus
Tags: svg, typography, effect, blend, text
31. Liquid Type
Creating a "wave" liquid effect on type using SVG mask.
Author: Callum Martin (Callum-Martin)
Links: Source Code / Demo
Created on: April 26, 2017
Made with: HTML, CSS
Tags: svg, wave, mask, liquid, first
32. Animated Wave Clipped By Text
Animated wave inside text with svg. Image in the background and gradient filling the wave. For an animation with percents from 0 to 100 and water filling the numbers, see http://codepen.io/web-tiki/pen/rjBbEr
Author: web-tiki (web-tiki)
Links: Source Code / Demo, Codepen.io
Created on: January 2, 2017
Made with: HTML, CSS
Tags: css, svg, animation, text, mask
33. Pure CSS Text Animation
Author: Robin Treur (RobinTreur)
Links: Source Code / Demo
Created on: September 10, 2016
Made with: HTML, SCSS
34. Impossibly Tipsy
Author: James Mellers (jamesmellers)
Links: Source Code / Demo
Created on: June 8, 2016
Made with: HTML, CSS
35. Text Animation: Montserrat
Text animation inspired by Web Designer issue 241
Author: Claire Larsen (ClaireLarsen)
Links: Source Code / Demo
Created on: October 21, 2015
Made with: HTML, CSS, JS
Tags: text, animation, montserrat
36. Wave Text Effect
Author: Lucas Bebber (lbebber)
Links: Source Code / Demo
Created on: September 1, 2015
Made with: HTML, Stylus
Tags: svg, typography, effect, blend, text
37. CSS Only Random Text Transform
Generate Random Text Transformation Using CSS Only
Author: lefoy (lefoy)
Links: Source Code / Demo
Created on: July 26, 2015
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css-only, text, random, transform
38. Typed.scss: CSS-powered Animated Text
Look ma! No H(TML)andlebars... or JS Typed.js ported entirely to CSS (SCSS)
Author: Brandon McConnell (brandonmcconnell)
Links: Source Code / Demo
Created on: March 6, 2019
Made with: SCSS
Tags: typed, no-js, css-only, creative, simulate
39. Animated Text Shadow Pattern
Uses -webkit-background-clip: text & linear-gradient to simulate striped text shadow.
Author: carpe numidium (carpenumidium)
Links: Source Code / Demo
Created on: December 21, 2013
Made with: HTML, CSS
40. Smoky Text
Combining text-shadow and CSS transforms (especially skew) for a smoky (or smokey?) effect. Webfont Finger Paint (http://www.google.com/fonts/specimen/Finger+Paint)
Author: Bennett Feely (bennettfeely)
Links: Source Code / Demo, Www.google.com
Created on: August 2, 2013
Made with: HTML, SCSS
Tags: text-shadow, typography, transform, skew
41. Animated Text Fill
Fill your text with animated background images - no Javascript required, Webkit only.
Author: Daniel Riemer (zitrusfrisch)
Links: Source Code / Demo
Created on: April 13, 2013
Made with: HTML, SCSS
42. CSS3 Text Animation Effect
Author: Nick Mkrtchyan (Sonick)
Links: Source Code / Demo
Created on: October 15, 2013
Made with: HTML, CSS
43. Pure CSS Text Animation
Text animation with pure css using @keyframes rules
Author: Mamun Khandaker (kh-mamun)
Links: Source Code / Demo
Created on: January 29, 2017
Made with: HTML, CSS, JS
Tags: @keyframes animation, text animation with pure css, amazing css animation, crazy css text animation, inspiring css animation effect
44. Clip Path Text Animation
Author: Khairul (Khairul021)
Links: Source Code / Demo
Created on: August 27, 2020
Made with: HTML, CSS
Tags: clip-path, clip-path-text-animation, text-animation, clip-path-animation, css-text-animation
45. "hey" - 3D Text Animation (Animations)
Author: Radu (maxym11)
Links: Source Code / Demo
Created on: June 13, 2020
Made with: HTML, SCSS
Tags: text-animation, 3d-text, moving, css, multiplying
46. Wavy Text Animation Effect
Author: Vladimir (VladimirVaize)
Links: Source Code / Demo
Created on: May 24, 2020
Made with: HTML, CSS
Tags: text-animation
47. Text Animation
Author: Furkan (sfbdev)
Links: Source Code / Demo
Created on: May 23, 2020
Made with: HTML, SCSS
Tags: text, fill text, css, text-animation
48. Animated Blobs Text - Multiple Colors
Author: Animation Bro (animationbro)
Links: Source Code / Demo
Created on: May 23, 2020
Made with: HTML, CSS
Tags: animation-css, text-animation, animation
49. Pure CSS Text Animation
Author: Robin Treur (RobinTreur)
Links: Source Code / Demo
Created on: September 10, 2016
Made with: HTML, SCSS
50. CSS3 Text Animation Effect
Author: Nick Mkrtchyan (Sonick)
Links: Source Code / Demo
Created on: October 15, 2013
Made with: HTML, CSS
51. SVG Text Animation .. Animated Dashed Stroke Pattern
Author: Ebram Marzouk (P3R0)
Links: Source Code / Demo
Created on: March 1, 2015
Made with: HTML, SCSS, JS
Tags: svg, animation
52. Text Animation
Text animation by Yoann HELIN
Author: Yoann (yoannhel)
Links: Source Code / Demo
Created on: November 24, 2013
Made with: HTML, SCSS, JS
Tags: pure-css, css3, animation, flat, text
More Awesome Lists:
Share: