Electric Pulse Animated Text Using CSS

by Wayne Smith

By using the mix-blend-mode on text you can create a texture layer using the background under the text. It becomes the texture of the text with a background of either black or white around the text. This texture can also be animated to create any number of effects. In this case an animated electric pulse for the texture of the words. Both mix-blend-mode and @keyframe animation are widely supported. Another solution would be to use the background-clip: text, which is now being supported with a -webkit prefix, pending standard.

Animated Text

The following is the CSS code and HTML used for this example.