- 82 CSS Text Animations
- Related Articles
- Author
- Links
- Made with
- About a code
- Schitt’s Creek (CSS)
- Author
- Links
- Made with
- About a code
- Ghosts and Ghouls
- Author
- Links
- Made with
- About a code
- EAT SLEEP RAVE — 3D ROTATE
- Author
- Links
- Made with
- About a code
- Text Frame Border Animation Rotation That
- Author
- Links
- Made with
- About a code
- Text Animation
- Author
- Links
- Made with
- About a code
- City Nights Text Effect
- Author
- Links
- Made with
- About a code
- Hello World! CSS Text Roller
- Author
- Links
- Made with
- About a code
- CSS Rolling Text
- Author
- Links
- Made with
- About a code
- Title Page — CSS Only
- Author
- Links
- Made with
- About a code
- Rotate Text
- Author
- Links
- Made with
- About a code
- Text Shadow
- Author
- Links
- Made with
- About a code
- CSS Text Shadow Animation
- Author
- Links
- Made with
- About a code
- 3D Text
- Author
- Links
- Made with
- About a code
- Rotate Ipsum (CSS)
- Author
- Links
- Made with
- About a code
- CSS
- Author
- Links
- Made with
- About a code
- Holographic Type
- Author
- Links
- Made with
- About a code
- Text Animation
- Author
- Links
- Made with
- About a code
- Text Split and Reveal Animation
- Author
- Links
- Made with
- About a code
- CSS Flying Platform
- Author
- Links
- Made with
- About a code
- Airport Info
- Author
- Links
- Made with
- About a code
- Animation in the Dark. Café Text Animation
- Author
- Links
- Made with
- About a code
- Cool Text
- Author
- Links
- Made with
- About a code
- Happy New Year SVG Animation
- Author
- Links
- Made with
- About a code
- Pure CSS Text Animation
- Author
- Links
- Made with
- About a code
- 3D CSS Letter Transition
- Author
- Links
- Made with
- About a code
- Neon Tex
- Author
- Links
- Made with
- About a code
- CSS Text-Shadow Animation
- Author
- Links
- Made with
- About a code
- Glowing Text
- Author
- Links
- Made with
- About a code
- Bottle of Text
- Author
- Links
- Made with
- About a code
- SVG Text
- Author
- Links
- Made with
- About a code
- Slide to Unlock Shine
- Author
- Links
- Made with
- About a code
- Waaaves
- Author
- Links
- Made with
- About a code
- BlackLivesMatter
- Author
- Links
- Made with
- About a code
- Easy Animation
- Author
- Links
- Made with
- About a code
- Pure CSS Text Shadow Animation
- Author
- Links
- Made with
- About a code
- Animated 3D Text
- Author
- Links
- Made with
- About a code
- Enthusiasm
- Author
- Links
- Made with
- About a code
- Exciting Multi-line Highlights
- Author
- Links
- Made with
- About a code
- Shining Text Effect
- Author
- Links
- Made with
- About a code
- Rainbow Spotlight
- Author
- Links
- Made with
- About a code
- Wave Text
- Author
- Links
- Made with
- About a code
- Neon Lights
- Author
- Links
- Made with
- About a code
- Rainbow Effect
- Author
- Links
- Made with
- About a code
- Line Through Effect 3D
- Author
- Links
- Made with
- About a code
- Animated Neon Text
- Author
- Links
- Made with
- About a code
- Glowing Text
- Author
- Links
- Made with
- About a code
- Animated Text with mix-blend-mode
- Author
- Links
- Made with
- About a code
- Liquid Drop Using Gooey Effect
- Author
- Links
- Made with
- About a code
- Multi-line Spanning Animated Underline
- Author
- Links
- Made with
- About a code
- Spooky Typo
- Author
- Links
- Made with
- About a code
- Text Animation
- Author
- Links
- Made with
- About a code
- Cartoon Type
- Author
- Links
- Made with
- About a code
- CSS 3D Text Effect
- Author
- Links
- Made with
- About a code
- Word Swipe Animation
- Author
- Links
- Made with
- About a code
- Luminance
- Author
- Links
- Made with
- About a code
- FadeIn Text with Bars
- Author
- Links
- Made with
- About a code
- Apple Commercial Animation
- Author
- Links
- Made with
- About a code
- Tiger Uppercut
- Author
- Links
- Made with
- About the code
- Text Animation
- Author
- Links
- Made with
- About the code
- Shining Text Animation Effects
- Author
- Links
- Made with
- About the code
- Animated Text Gradient
- Author
- Links
- Made with
- About the code
- Handwriting Animation
- Author
- Links
- Made with
- About the code
- Pure CSS Text Animation
- Author
- Links
- Made with
- About the code
- Masking Path Animation
- Author
- Links
- Made with
- About the code
- CSS Only Frozen Text
- Author
- Links
- Made with
- About the code
- HTML, CSS and JS Letter Animation
- Author
- 22 Best Free CSS Text Animations In 2023 | Techknowprime
- 1. Cool Text
- 2. Glowing Text
- 3. Wave Text
- 4. Breathe (Coded On iOS)
- 5. Line Through Effect 3D
- 6. CSS Text-Shadow Animation
- 7. Neon Lights
- 8. Exciting Multiline Highlights
- 9. Cartoon Type
- 10. SVG Text
- 11. Mix Blend Mode
- 12. Waaaves
- 13. Glowing Text Music Inspired
- 14. 3D CSS Letter Transition
- 15. Shining Text Effect
- 16. BlackLivesMatter
- 17. CSS 3D Text Effect
- 18. Easy Animation
- 19. Spooky Typo
- 20. FadeIn Text With Bars
- 21. Rainbow Spotlight
- 22. Drop Gooey Effect
82 CSS Text Animations
Collection of hand-picked free HTML and CSS text animation code examples from Codepen, GitHub and other resources. Update of May 2021 collection. 28 new items.
Related Articles
Author
Links
Made with
About a code
Schitt’s Creek (CSS)
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Ghosts and Ghouls
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
EAT SLEEP RAVE — 3D ROTATE
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Text Frame Border Animation Rotation That
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Text Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
City Nights Text Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Hello World! CSS Text Roller
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
CSS Rolling Text
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Title Page — CSS Only
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Rotate Text
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Text Shadow
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
CSS Text Shadow Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
3D Text
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Rotate Ipsum (CSS)
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Holographic Type
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Text Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Text Split and Reveal Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
CSS Flying Platform
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Airport Info
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Animation in the Dark. Café Text Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Cool Text
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Happy New Year SVG Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Pure CSS Text Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
3D CSS Letter Transition
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Neon Tex
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
CSS Text-Shadow Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Glowing Text
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Bottle of Text
A spinning water bottle made of text and CSS 3D transforms.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
SVG Text
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Slide to Unlock Shine
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Waaaves
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
BlackLivesMatter
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Easy Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Pure CSS Text Shadow Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Animated 3D Text
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Enthusiasm
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Exciting Multi-line Highlights
Ditch the boring underline, add some exciting highlights.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Shining Text Effect
Using simple CSS background-clip technique, the text can be made to show like its under the spotlight and shining in the dark.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Rainbow Spotlight
Using background-clip:text and animating clip-path on pseudo element, the ranibow focus was achieved.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Wave Text
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Neon Lights
Compatible browsers: Chrome, Firefox, Opera, Safari
Author
Links
Made with
About a code
Rainbow Effect
Animated text with rainbow effect.
Compatible browsers: Chrome, Firefox, Opera, Safari
Author
Links
Made with
About a code
Line Through Effect 3D
Compatible browsers: Chrome, Firefox, Opera, Safari
Author
Links
Made with
About a code
Animated Neon Text
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Glowing Text
Glowing text using CSS keyframes .
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Animated Text with mix-blend-mode
Compatible browsers: Chrome, Firefox, Opera, Safari
Author
Links
Made with
About a code
Liquid Drop Using Gooey Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Multi-line Spanning Animated Underline
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
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.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Text Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Cartoon Type
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
CSS 3D Text Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Word Swipe Animation
Word carousel in pure CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Luminance
background-clip text effect.
Compatible browsers: Chrome, Firefox, Opera, Safari
Author
Links
Made with
About a code
FadeIn Text with Bars
Pure CSS fadein text with bars.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Apple Commercial Animation
Recreating the iPad Commercial Animation with CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Tiger Uppercut
Knockout text with overlapping animated GIFs and CSS mix-blend-mode .
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Text Animation
Text animation in HTML, CSS and JS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Shining Text Animation Effects
Shining text animation effect in HTML and CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Animated Text Gradient
Pure CSS animated text gradient.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Handwriting Animation
Compatible browsers: Chrome, Firefox, Opera, Safari
Author
Links
Made with
About the code
Pure CSS Text Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Masking Path Animation
Sometimes simple is just as effective as complex. I’m a huge fan of typography and in this example by Steven Sinatra an SVG mask is used to help isolate the text and animate it in place. A fun approach that can be used for those well-known hero sections.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
CSS Only Frozen Text
CSS only animated frozen text effect with background-clip , mix-blend-mode and gradient text. JS is to make the text editable for demo purpose, not required for the effect.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
HTML, CSS and JS Letter Animation
Animating letters with CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
22 Best Free CSS Text Animations In 2023 | Techknowprime
In 2023, CSS Text Animations will be more powerful than ever. With the help of free CSS text animation code, you can create stunning and eye-catching text animations that will capture the attention of your audience.
These CSS Text Animations allow you to create complex and beautiful animations without any coding knowledge. You can use these code examples to animate text, images, and videos on your website or web application.
In this article, we’ll take a look at some of the best free HTML and CSS Text Animations that you can use in 2023. We’ll also discuss how they work and their various use cases so that you can make an informed decision when choosing a tool for your project.
1. Cool Text
Cool Text
Made By: Christine Banlawi
2. Glowing Text
Glowing Text
Made By: Pratham
3. Wave Text
Wave Text
Made By: Swarup Kumar Kuila
4. Breathe (Coded On iOS)
Breathe (Coded On iOS)
Made By: Elisabéth
5. Line Through Effect 3D
Line Through Effect 3D
Made By: Ana Tudor
6. CSS Text-Shadow Animation
CSS Text-Shadow Animation
Made By: Faria Begum Riya
7. Neon Lights
Neon Lights
Made By: Cooper
8. Exciting Multiline Highlights
Exciting Multi-line Highlights
Made By: Manan Tank
9. Cartoon Type
Cartoon Type
Made By: Tim Van Damme
10. SVG Text
SVG Text
Made By: ANA MAFLA
11. Mix Blend Mode
Mix-Blend-Mode
Made By: Cassandra Rossall
12. Waaaves
13. Glowing Text Music Inspired
Glowing Text, Music Inspired
Made By: amber
14. 3D CSS Letter Transition
3D CSS Letter Transition
Made By: Adam Kuhn
15. Shining Text Effect
Shining Text Effect
Made By: G Rohit
16. BlackLivesMatter
BlackLivesMatter
Made By: Max Mykhalchuk
17. CSS 3D Text Effect
CSS 3D Text Effect
Made By: Kyle Wetton
18. Easy Animation
19. Spooky Typo
Spooky Typo
Made By: ilithya
20. FadeIn Text With Bars
Pure CSS | FadeIn Text With Bars | KeyFrames & SCSS
Made By: Kaio Almeida
21. Rainbow Spotlight
Rainbow Spotlight
Made By: Shireen Taj
22. Drop Gooey Effect
Drop : Gooey Effect
Made By: Tushar Choudhari