10 Stunning Examples of Text Distortion Effects in Web Design
We all love typography. And when type is set in motion, we love it even more!
When used properly, text distortion effects (or, the “glitch” effect) can greatly enhance the typography of a web design, especially when used for drawing attention to a particular headline, tagline, or regular block of text.
Remember, though, that being highly selective with its use is key to the success of the distortion, as users don’t typically like overly obtrusive effects. Tread carefully if you plan to make use of this tiny design trend.
Today, we have ten stunning CSS and JavaScript text distortion effect snippets for your web design inspiration. Enjoy!
Glitched Text by Lucas Bebber
Lucas Bebber has created an analog-like creation with just a slight touch of noise. It has been created using only CSS, so it’s lightweight and fast. The effect does have some subtle pausing throughout, ensuring that the animation doesn’t overly annoy viewers.
See the Pen CSS Glitched Text by Lucas Bebber
Ants! by Bennett Feely
This example makes clever use of Blotter.js, a modern JavaScript library for drawing creative text effects. Each symbol has been composed of hundreds of tiny irregular shapes that move in an almost chaotic fashion. The effect is not overwhelming, annoying, or irritating. On the contrary, it is intriguing and visually appealing.
See the Pen Ants! (with blotter.js) by Bennett Feely
Underwater SVG Text by Katrine-Marie Burmeister
Lately, water-inspired effects have become popular among creative web developers. Katrine-Marie Burmeister has created this simple solution that would give any text a lovely underwater touch.
See the Pen Underwater SVG Text by Katrine-Marie Burmeister
Distortion by Corentin
This text effect example is much less extravagant than Bennet Feely’s and more intriguing than the previous example from Katrine-Marie Burmeister. It has a liquid-like behavior that is revealed when the user hovers over the lettering. It is simple yet eye-catching.
See the Pen distortion by Corentin
Particle Text by Noname
Every letter in this creation is composed of numerous dots that begin to move erratically when the mouse cursor hovers over them. It almost feels like you are going to blow them away.
See the Pen PARTICLE TEXT by al-ro
Text particle by Thibaud Goiffon
Using thousands of solid circles of various sizes and colors, Thibaud Goiffon has created an outstanding distortion concept. He has also provided the viewer with a small control panel to edit such variables as gravity, duration, speed, radius, and resolution.
See the Pen Text particle by Thibaud Goiffon
Dynamic 3D confetti text by Rachel Smith
This example is a playground where you can edit your own text. Each symbol is composed of numerous colorful triangles of various sizes. Here, the distortion effect is quite delicate. The result is that the text looks elegant despite its bold appearance.
See the Pen dynamic 3D confetti text by Rachel Smith
Spark Text SCSS by Tatsuya Azegami
This example has been created to amuse the viewer. Hover your mouse cursor over the text, and you will see a thin straight line blow each letter away like a sharp arrow. Of course, everything comes back to normal almost immediately.
See the Pen Spark Text SCSS by Tatsuya Azegami
Squiggly Text by Lucas Bebber
This text effect feels like it is trembling with fear, so it will certainly come in handy for numerous Halloween-inspired websites. This is another pure CSS creation that cleverly makes use of SVG filters.
See the Pen Squiggly Text by Lucas Bebber
Text Distortion by Joshua Ward
This is another solution that requires user interaction. When the cursor hovers the text, a second layer appears. It consists of blue and pink colors that give each letter a mock 3D anaglyphic touch. It also has a slight vibrating effect that forces the text to pulsate, thereby unobtrusively drawing attention.
See the Pen Text Distortion by Jøshüå Wård
Text Scramble Effect by Justin Windle
Justin Windle has taken one of the banalest text effects up to the next level. This typing effect looks simple but stylish. This example is so universal and elegant that it could easily be used on numerous types of projects.
See the Pen Text Scramble Effect by Justin Windle
With these text distortion code snippets, you can bring a playful feel to any project. They don’t require much effort and will all leave a lasting impression on your users and visitors.