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!
Neon Glow Text Effect
This is so not what a neon sign looks like, but I stumbled on the effect on accident and thought it looked cool.
See the Pen Neon Glow Text Effect by giana (@giana) on CodePen.
Particle Text Effect
A neat exploding particle text effect using JS and CSS.
See the Pen Particle Text Effect by tomncurry (@tomncurry) on CodePen.
Animated Text Fill With SVG Text
A cool SVG text effect that resembles worms moving on letters and changing colors.
See the Pen Animated Text Fill With SVG Text by cesar2535 (@cesar2535) on CodePen.
CSS-Only Glitch Effect
Glitch sort of tect effect with CSS animation.
See the Pen CSS-Only Glitch Effect by nilbog (@nilbog) on CodePen.
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.
See the Pen Vertically Rotating Text With CSS by JacobStone420 (@JacobStone420) on CodePen.
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.
See the Pen “Animated “”Text-Shadow”” Pattern” by carpenumidium (@carpenumidium) on CodePen.
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.
See the Pen Peeled Text Transforms by Michiel (@Michiel) on CodePen.
Animating SVG Text
A simple SVG intro text effect perfect for landing pages.
See the Pen Animating SVG Text by supah (@supah) on CodePen.
Variable Longshadow Text Effect With Gradients Mixin
Variable long shadow text effect using only CSS gradients mixin.
See the Pen Variable Longshadow Text Effect With Gradients Mixin by dariocorsi (@dariocorsi) on CodePen.
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.
See the Pen Pure CSS Text Animation by RobinTreur (@RobinTreur) on CodePen.
Rotating CSS Text Effect
I really liked what they did with the text over at http://panda.network/ so I thought I'd have a crack at making my own implementation here.
See the Pen Rotating CSS Text Effect by rachsmith (@rachsmith) on CodePen.
Pretty Shadow Effect
A pretty cute text shadow effect using only CSS.
See the Pen Pretty Shadow Effect by MoorLex (@MoorLex) on CodePen.
Glitch Text Effect
A smooth glitch text effect done with some simple CSS animations.
See the Pen Glitch Text Effect by zoite (@zoite) on CodePen.
CSS Line Text Effect
My first try at canvas. Didn't turn out as nice as I'd hoped, but whatever.
See the Pen CSS Line Text Effect by birjolaxew (@birjolaxew) on CodePen.
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.
See the Pen Colorful Text Animation by hendrysadrak (@hendrysadrak) on CodePen.
GSAP Text Animation
A simple text effect using [Greensock] GSAP (https://greensock.com/gsap).
See the Pen GSAP Text Animation by natewiley (@natewiley) on CodePen.
Css Glitched Text by Skew
CSS glitched text effect using skewed angles.
See the Pen Css Glitched Text by Skew by sliiice (@sliiice) on CodePen.
Text-Mask Background Moving on MouseMove – v2
A neat trick using text mask background moving on mouse move.
See the Pen Text-Mask Background Moving on MouseMove – v2 by dghez (@dghez) on CodePen.
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.
See the Pen CSS Animated Highlighted Text by ariona (@ariona) on CodePen.
Text Animation: Montserrat
Text animation inspired by Web Designer issue 241.
See the Pen Text Animation: Montserrat by ClaireLarsen (@ClaireLarsen) on CodePen.
CSS Perspective Text Hover
An experiment using webfonts in combination with CSS 3D transform tools.
See the Pen CSS Perspective Text Hover by bosworthco (@bosworthco) on CodePen.
Happy Text Effect
An awesome wave text effect using CSS animation.
See the Pen Happy Text Effect by bennettfeely (@bennettfeely) on CodePen.
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.
See the Pen SVG Path Animated Text by Zaku (@Zaku) on CodePen.
Efek Typography Text Neon part 1
Make text design (typography) with neon effect.
See the Pen Efek Typography Text Neon part 1 by primaapriansyah (@primaapriansyah) on CodePen.
CSS Animated Text Fill
Fill your text with animated background images – no Javascript required, Webkit only.
See the Pen CSS Animated Text Fill by zitrusfrisch (@zitrusfrisch) on CodePen.
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.
See the Pen Bubbling Text Effect by html5andblog (@html5andblog) on CodePen.
Shattering Text Animation
GSAP text animation. SVG path shattering. Slow motion on hover.
See the Pen Shattering Text Animation by ARS (@ARS) on CodePen.
Styling Text With SVG (Second Shadow)
An awesome retro 3D text effect using SVG and CSS.
See the Pen Styling Text With SVG (Second Shadow) by codeschool (@codeschool) on CodePen.
Animated Text With SnapSVG
Work with this feels like an old good Flash.
See the Pen Animated Text With SnapSVG by yoksel (@yoksel) on CodePen.
CSS Glitched Text
Another well-executed glitch effect on text using CSS and JS.
See the Pen CSS Glitched Text by derekjp (@derekjp) on CodePen.
3D CSS Typography
A lovely and bulky 3D text effect made with CSS. Renders best in Chrome.
See the Pen 3D CSS Typography by noahblon (@noahblon) on CodePen.
Wave Text Effect With SVG Blend Mode
Animated ocean wave effect using SVG blend mode and CSS.
See the Pen Wave Text Effect With SVG Blend Mode by lbebber (@lbebber) on CodePen.
Shaded Text Effect
Shaded Text, a SVG+CSS3 experiment about animated shadows. It isn't optimized for mobile devices… yet.
See the Pen Shaded Text Effect by rgg (@rgg) on CodePen.
#Codevember 3D Quote Rotator Effect
Using [GreenSock](http://greensock.com/gsap) and the [SplitText](http://greensock.com/SplitText) plugin to create a 3D text effect for #Codevember #7 day 9.
See the Pen #Codevember 3D Quote Rotator Effect by natewiley (@natewiley) on CodePen.
