Glitch text effect with CSS only - A fun use of text-shadows, keyframes and clip-path can lead to a pretty nice looking glitch effect for some text. One thing that’s important is to stop the animation for users who prefer not having animations, so we take a look at that too.

Timestamps
00:00 - Intro
01:00 - Glitch setup
04:11 - Glitch animation
07:43 - Broken text effect
16:21 - prefers-reduced-motion
18:28 - outro

Clip path tool: https://bennettfeely.com/clippy/

Codepen of this: https://codepen.io/kevinpowell/pen/YzqerQm

Subscribe : https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw

#css #web-development

Glitch text effect with CSS only
3.35 GEEK