Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Animated Glitch Text Effect With CSS Only

Kevin Powell via YouTube

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
Learn how to create an animated glitch text effect using only CSS in this 20-minute tutorial. Explore the use of text-shadows, keyframes, and clip-path to achieve a visually striking glitch effect for text. Discover the importance of accessibility by implementing the prefers-reduced-motion feature to accommodate users who prefer minimal animations. Follow along as the instructor demonstrates the glitch setup, animation techniques, and how to create a broken text effect. Gain insights into using tools like the clip path generator and learn best practices for implementing motion sensitivity in web design. By the end of this tutorial, you'll have the skills to add an eye-catching glitch effect to your web projects while ensuring a positive user experience for all visitors.

Syllabus

- Intro
- Glitch setup
- Glitch animation
- Broken text effect
- prefers-reduced-motion
- outro

Taught by

Kevin Powell

Reviews

Start your review of Animated Glitch Text Effect With CSS Only

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.