css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

The "glitch" effect, recreated with animated CSS custom properties. Pure CSS. It doesn't work in Firefox for now, but will work in the next version. I have no idea why i called it like that.


  1. Make animation faster to match "heartbeat", and set glitches timings to subdivisions of the heartbeat. Simplified font type and made it white to give it more impact (personal taste).

    And you'll have this > https://codepen.io/Canilho/pen/BRgXmd Not suitable for people that can suffer from epileptic attacks :S

  2. Freaking awesome glitch! It's pretty frustrating to get this to workin in Firefox, been trying it myself.

  3. Fantastic job, @alexnoz ! Forking this pen myself to play a bit as well. Keep it up!

  4. i'm so fucking confused... where have you set the green and pink colors for the distortion? are these determined by the browser or something?

  5. @tOkyO1, see the line #56 in CSS section. These colors are shadows whose x-offset depends on --left variable, so when it is changed, the shadows are translated to the left or to the right (if --left is negative).

  6. oh, yes, you're right. i don't know how i missed that :/ i even specifically looked at the filter property below that and to myself i was like "okay, the drop shadow doesn't effect the colors..." lol. must've been staring at a screen for too long

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.