In today’s post, we’re sharing some of the most interesting and unusual CSS text effects – some with the help of JavaScript – that we’ve found on CodePen for your inspiration as well as to possibly use in any of your upcoming projects. These examples range from animations, to hover interactions, to simply unique. Maybe you’ve seen some before, or maybe they are all new to you. Regardless, we hope you find them useful and inspirational.
Your Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets
CSS Perspective Text Hover
A nifty stair climbing animation on hover.
See the Pen CSS Perspective Text Hover by James Bosworth (@bosworthco) on CodePen.dark
LOVE Text Effect
Here’s an unusual typing effect.
See the Pen LOVE Text Effect by Matthew Wagerfield (@wagerfield) on CodePen.dark
CSS-Only Shimmering Neon Text
A very cool shimmering neon text effect made with pure CSS.
See the Pen CSS-only shimmering neon text by Giana (@giana) on CodePen.dark
Terminal Text Effect
Another typing effect, this time replicating a terminal with a blinking cursor.
See the Pen Terminal Text Effect by Tobias (@Tbgse) on CodePen.dark
Flashing Neon Text
This one has the appearance of a neon sign flashing on and off, coded in only CSS.
See the Pen CSS Text-FX by moklick (@moklick) on CodePen.dark
GSAP Text Animation
Here’s an interesting animated text effect that brings letters together into words.
See the Pen GSAP Text Animation by Nate Wiley (@natewiley) on CodePen.dark
Silent Movie Text Effect
This effect makes makes the text look like an old silent movie, all done with pure CSS.
See the Pen Silent Movie Text Effect by Dimitra Vasilopoulou (@mimikos) on CodePen.dark
Pure CSS Shimmer Text Effect
A smooth animated shimmering text effect, again in only pure CSS.
See the Pen CSS Shimmer Text Effect by Robert Douglas (@redouglas) on CodePen.dark
Fluid Text Hover
Very nice text effect that makes the background masked by the text flow fluidly with the mouse direction.
See the Pen Fluid text hover by Robin Delaporte (@robin-dela) on CodePen.dark
Fly In, Fly Out
Simple but effective text effect where the letters fly in from the top and out through the bottom.
See the Pen Fly in, fly out by Neil Carpenter (@neilcarpenter) on CodePen.dark
Repellers
An interesting text effect in which the text repels away from the mouse movement.
See the Pen Repellers by Johan Karlsson (@DonKarlssonSan) on CodePen.dark
3D Text Effect On Mousemove
Moving the mouse makes a cool 3D text effect in this example.
See the Pen 3d Text effect – mousemove by Dennis Garrn (@dennisgarrn) on CodePen.dark
Cool Pure CSS Text Effect
A nice masked background animation.
See the Pen (cool) text effect by Hakkam Abdullah (@Moslim) on CodePen.dark
Bubbling Text Effect
A clean bubbling animation to use in headers or however you’d like, made with CSS and jQuery.
See the Pen Bubbling Text Effect by html5andblog (@html5andblog) on CodePen.dark
Flickering Light Text Effect
This animation simulates a flickering light bulb within the text.
See the Pen Flickering Light Text Effect by Mandy Michael (@mandymichael) on CodePen.dark
Matrix Text Effect
This one needs no introduction or explanation.
See the Pen Matrix Text Effect by Collin Henderson (@syropian) on CodePen.dark
Opening Sequence
A smooth text effect that replicates the opening sequence of a movie or trailer.
See the Pen Opening Sequence by Sebastian Schepis (@sschepis) on CodePen.dark
Sliding Text Effect
A cool animation that responds to mouse movements.
See the Pen Sliding text effect by ChenXin_nth (@chenxinnn) on CodePen.dark
Black Mirror Cracked Text Effect
An unusual effect that makes the text crack apart, done in pure CSS.
See the Pen Black Mirror Cracked Text Effect by George W. Park (@GeorgePark) on CodePen.dark
Text Effect
Hover over the text to see an unusual effect.
See the Pen Text Effect by Max Nguyen (@maxnguyen) on CodePen.dark
In/Out of Focus Text Effect
Here’s another unusual pure CSS animated text effect.
See the Pen In/out of focus text effect by Jonny Scholes (@jonnyscholes) on CodePen.dark
Futuristic Resolving/Typing Text Effect
Each letter rotates into position as it is typed in this interesting effect.
See the Pen Futuristic Resolving/Typing Text Effect feat. GLaDOS by Kevin (@qkevinto) on CodePen.dark
Shadow and Pattern Text Effects
Here’s a few hover effects in pure CSS.
See the Pen A collection of CSS text-shadow and pattern effects by Ashley Watson-Nolan (@ashleynolan) on CodePen.dark
Spotlight Cursor Text Screen
Very nicely done cursor-following effect.
See the Pen Spotlight Cursor Text Screen by Caroline Artz (@carolineartz) on CodePen.dark
Wave Text Effect (With SVG/Blend Mode)
A relatively simple CSS only animated masked text effect using SVG with blend mode.
See the Pen Wave text effect (with SVG/blend mode) by Lucas Bebber (@lbebber) on CodePen.dark
Particle Text Effect
A nice animation that you can control the speed by dragging your mouse over it.
See the Pen Particle Text Effect by Tom (@tomncurry) on CodePen.dark
Glitch Text
A pure CSS glitchy text effect.
See the Pen Glitch Text by Fabio (@fabiowallner) on CodePen.dark
How will you use these CSS text effects?
We hope you’ve enjoyed the creative examples we found and shared with you, and can use any of them in your projects. Be sure to check out our collections of CSS code snippets too!
This post may contain affiliate links. See our disclosure about affiliate links here.