Your Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets
A nifty stair climbing animation on hover.
Here’s an unusual typing effect.
A very cool shimmering neon text effect made with pure CSS.
Another typing effect, this time replicating a terminal with a blinking cursor.
This one has the appearance of a neon sign flashing on and off, coded in only CSS.
Here’s an interesting animated text effect that brings letters together into words.
This effect makes makes the text look like an old silent movie, all done with pure CSS.
A smooth animated shimmering text effect, again in only pure CSS.
Very nice text effect that makes the background masked by the text flow fluidly with the mouse direction.
Simple but effective text effect where the letters fly in from the top and out through the bottom.
An interesting text effect in which the text repels away from the mouse movement.
Moving the mouse makes a cool 3D text effect in this example.
A nice masked background animation.
A clean bubbling animation to use in headers or however you’d like, made with CSS and jQuery.
This animation simulates a flickering light bulb within the text.
This one needs no introduction or explanation.
A smooth text effect that replicates the opening sequence of a movie or trailer.
A cool animation that responds to mouse movements.
An unusual effect that makes the text crack apart, done in pure CSS.
Hover over the text to see an unusual effect.
Here’s another unusual pure CSS animated 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
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
Very nicely done cursor-following effect.
A relatively simple CSS only animated masked text effect using SVG with blend mode.
A nice animation that you can control the speed by dragging your mouse over it.
A pure CSS glitchy text effect.
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.