10 Coolest Text Effect Snippets on CodePen

CodePen is a really popular snippet repository site where developers and designers can upload pieces of their project to help inspire the work of other developers and designers. It’s a great tool for expanding your understanding of what code can do, and it’s also a really good way to gain inspiration for any upcoming work you might have. One of the most popular types of snippet is one that applies styling to different types of text to create cool, funky, and creative text effects. Keep reading to see our curated list of the coolest text effect snippets we’ve found on CodePen.

1. 3D Text Effect

Join us in our newest publication:

Screen Shot 2017-03-18 at 11.00.39 AM


This is not your typical 3D text effect. The shadow that’s used to give the text its 3D effect is actually animated, and changes position based on the movement of the cursor.

2. Matrix Text Effect

Screen Shot 2017-03-18 at 11.05.39 AM

This animated text effect allows you to watch as the words are written to the viewport. It’s styled to resemble an effect from the matrix, but if you like the functionality of the snippet and not the style, feel free to customize the look to your liking.

3. Mystique Text Effect

Screen Shot 2017-03-18 at 11.11.42 AM


This 70s-inspired  text effect has a smooth animated gradient effect that changes the colors of the text over a period of time.

4. Bubble Text Effect

Screen Shot 2017-03-18 at 11.18.00 AM


Create a bubble text effect using this CSS snippet. The pink color elevates this bubble effect to a very cool bubblegum effect.

5. Limelight Text Effect

Screen Shot 2017-03-18 at 11.20.20 AM


Channel your inner Hollywood with this fun effect that makes the text look as though it’s lit up like an old fashioned show business sign.

6. Striped Rainbow Text Effect

Screen Shot 2017-03-18 at 11.22.53 AMAdd some color to your projects with this cool striped rainbow text effect. The code uses SCSS to easily achieve the different color stripes.

7. High Voltage Text Effect

Screen Shot 2017-03-18 at 11.25.14 AM



This animated text effect is electric — it literally looks like it’s been struck by lightning. The animation is done using SVG tags, so little CSS and no JavaScript/jQuery are require to achieve the effect.

8. Vintage Text Effect

Screen Shot 2017-03-18 at 11.28.28 AM


Create some vintage-inspired text using this free CSS snippet. The font used is one that uses an aesthetic from the early 1900s, and the background behind the font is inspired by a similar era.

9. SVG Stroke Text Effect

Screen Shot 2017-03-18 at 11.46.34 AM


This colorful text effect uses SVG animations to create moving dotted lines that serve as the borders of the letters. The snippet is fully customizable and uses relatively little code.

10. CSS Perspective Text

Screen Shot 2017-03-18 at 11.49.50 AM

This pure CSS text effect plays around with different perspectives using the CSS transform property. It also comes with a smooth hover effect that alters the perspective of the text upon hover.

Share and Enjoy !

0 0