CSS Text Effects From CodePen

It’s just crazy, the things you can do with CSS these days. 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?”.

This time I want to focus on text. That’s why I put together a list of impressive CSS text effects that you can only find on CodePen. Enjoy!

VHS text

See the Pen VHS text by Shorina (@Shorina) on CodePen.

[webkit] Animated “text-shadow” pattern

See the Pen [webkit] Animated “text-shadow” pattern by carpenumidium (@carpenumidium) on CodePen.

Peeled Text Transforms

See the Pen Peeled Text Transforms by Michiel (@Michiel) on CodePen.

Animating SVG text

See the Pen Animating SVG text by supah (@supah) on CodePen.

Variable Longshadow with Gradients Mixin

See the Pen Variable Longshadow with Gradients Mixin by dariocorsi (@dariocorsi) on CodePen.

text color draw

See the Pen text color draw by cjgammon (@cjgammon) on CodePen.

Pure CSS Text Animation

See the Pen Pure CSS Text Animation by RobinTreur (@RobinTreur) on CodePen.

Rotating text

See the Pen Rotating text by rachsmith (@rachsmith) on CodePen.

Pretty shadow

See the Pen Pretty shadow by MoorLex (@MoorLex) on CodePen.

Glitch Text

See the Pen Glitch Text by zoite (@zoite) on CodePen.

Line text.

See the Pen Line text. by birjolaxew (@birjolaxew) on CodePen.

Glitch

See the Pen Glitch by cbp (@cbp) on CodePen.

#webdev series – Colorful text animation #updated

See the Pen #webdev series – Colorful text animation #updated by hendrysadrak (@hendrysadrak) on CodePen.

GSAP Text Animation

See the Pen GSAP Text Animation by natewiley (@natewiley) on CodePen.

css glitched text by skew

See the Pen css glitched text by skew by sliiice (@sliiice) on CodePen.

Text-mask background moving on MouseMove – v2

See the Pen Text-mask background moving on MouseMove – v2 by dghez (@dghez) on CodePen.

Animated highlighted text

See the Pen Animated highlighted text by ariona (@ariona) on CodePen.

Text Animation: Montserrat

See the Pen Text Animation: Montserrat by ClaireLarsen (@ClaireLarsen) on CodePen.

CSS Perspective Text Hover

See the Pen CSS Perspective Text Hover by bosworthco (@bosworthco) on CodePen.

Happy Text

See the Pen Happy Text by bennettfeely (@bennettfeely) on CodePen.

Glitchy Text

See the Pen Glitchy Text by mattstvartak (@mattstvartak) on CodePen.

SVG Path animated Text

See the Pen SVG Path animated Text by Zaku (@Zaku) on CodePen.

Efek Typography Text Neon part 1

See the Pen Efek Typography Text Neon part 1 by primaapriansyah (@primaapriansyah) on CodePen.

Animated text fill

See the Pen Animated text fill by zitrusfrisch (@zitrusfrisch) on CodePen.

Bubbling Text Effect

See the Pen Bubbling Text Effect by html5andblog (@html5andblog) on CodePen.

Shattering Text Animation

See the Pen Shattering Text Animation by ARS (@ARS) on CodePen.

Styling Text with SVG (Second Shadow)

See the Pen Styling Text with SVG (Second Shadow) by codeschool (@codeschool) on CodePen.

Animated text with Snapsvg

See the Pen Animated text with Snapsvg by yoksel (@yoksel) on CodePen.

Glitched Text (study of The Verge)

See the Pen Glitched Text (study of The Verge) by derekjp (@derekjp) on CodePen.

3D CSS Typography ?

See the Pen 3D CSS Typography ? by noahblon (@noahblon) on CodePen.

Wave text effect (with SVG/blend mode)

See the Pen Wave text effect (with SVG/blend mode) by lbebber (@lbebber) on CodePen.

Shaded Text

See the Pen Shaded Text by rgg (@rgg) on CodePen.

3d hover text effect

See the Pen 3d hover text effect by SaschaSigl (@SaschaSigl) on CodePen.

#Codevember 3D Quote Rotator

See the Pen #Codevember 3D Quote Rotator by natewiley (@natewiley) on CodePen.