It’s just crazy, the CSS & JS text effects you can do these days. From glitch effects to blending modes, every time I think I’ve seen it all, some creative coder comes along and makes something on CodePen that leaves me wondering “How the heck does that work?”.
Needing to make some CSS animations for menus, loaders, I decided to also put together a list of impressive CSS text effects that you can only find on CodePen. Enjoy!
This is so not what a neon sign looks like, but I stumbled on the effect on accident and thought it looked cool.
Particle Text Effect
A neat exploding particle text effect using JS and CSS.
Animated Text Fill With SVG Text
A cool SVG text effect that resembles worms moving on letters and changing colors.
CSS-Only Glitch Effect
Glitch sort of tect effect with CSS animation.
Vertically Rotating Text With CSS
I've changed the font to Montserrat and added CSS3 browser prefixes so the animation works right out of the box across browsers.
VHS Text Effect
This neat retro VHS text effect was coded using CSS and Javascript.
See the Pen VHS Text Effect by Shorina [@Shorina] on CodePen.
“Animated Text-Shadow Pattern”
Uses `-webkit-background-clip: text` & `linear-gradient` to simulate striped text shadow.
Peeled Text Transforms
This pen shows text that looks like it is peeled of the page. It has a smooth animation when hovered. For accessibility reasons, I've added an `aria-label` to the paragraph.
Animating SVG Text
A simple SVG intro text effect perfect for landing pages.
Variable Longshadow Text Effect With Gradients Mixin
Variable long shadow text effect using only CSS gradients mixin.
Text Color Draw
Path drawing of text using greensock's drawSVG plugin.
See the Pen Text Color Draw by cjgammon [@cjgammon] on CodePen.
Pure CSS Text Animation
Neat slide and fade in text effect using pure CSS animation.
Rotating CSS Text Effect
I really liked what they did with the text over at //panda.network/ so I thought I'd have a crack at making my own implementation here.
Pretty Shadow Effect
A pretty cute text shadow effect using only CSS.
Glitch Text Effect
A smooth glitch text effect done with some simple CSS animations.
CSS Line Text Effect
My first try at canvas. Didn't turn out as nice as I'd hoped, but whatever.
Glitch Effect
CSS-only glitch text effect that looks awesome.
See the Pen Glitch Effect by cbp [@cbp] on CodePen.
Colorful Text Animation
Animated colorful text effect from left to right.
GSAP Text Animation
A simple text effect using [Greensock] GSAP [//greensock.com/gsap].
Css Glitched Text by Skew
CSS glitched text effect using skewed angles.
Text-Mask Background Moving on MouseMove – v2
A neat trick using text mask background moving on mouse move.
CSS Animated Highlighted Text
This pen was inspired by webdesignerdepot's new design, the title on each article will be highlighted when user hovered it.
Text Animation: Montserrat
Text animation inspired by Web Designer issue 241.
CSS Perspective Text Hover
An experiment using webfonts in combination with CSS 3D transform tools.
Happy Text Effect
An awesome wave text effect using CSS animation.
Glitchy Text
A well-made glitched text animation.
See the Pen Glitchy Text by mattstvartak [@mattstvartak] on CodePen.
SVG Path Animated Text
A cool SVG text effect that looks like spaghetti forming letters.
Efek Typography Text Neon part 1
Make text design [typography] with neon effect.
CSS Animated Text Fill
Fill your text with animated background images – no Javascript required, Webkit only.
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.
Shattering Text Animation
GSAP text animation. SVG path shattering. Slow motion on hover.
Styling Text With SVG [Second Shadow]
An awesome retro 3D text effect using SVG and CSS.
Animated Text With SnapSVG
Work with this feels like an old good Flash.
CSS Glitched Text
Another well-executed glitch effect on text using CSS and JS.
3D CSS Typography
A lovely and bulky 3D text effect made with CSS. Renders best in Chrome.
Wave Text Effect With SVG Blend Mode
Animated ocean wave effect using SVG blend mode and CSS.
Shaded Text Effect
Shaded Text, a SVG+CSS3 experiment about animated shadows. It isn't optimized for mobile devices… yet.
#Codevember 3D Quote Rotator Effect
Using [GreenSock][//greensock.com/gsap] and the [SplitText][//greensock.com/SplitText] plugin to create a 3D text effect for #Codevember #7 day 9.