CSS Glitch Effect

How To Create CSS Glitch Effect

Have you seen the emerging trend of a glitch effect creeping into some websites?

Are you wondering how some of these effects were created?

Glitch Effect Examples

Most of the effects on Kikk.be by Dogstudio and Year In Music by Stinkdigital are using mix of canvas filters and rendering, but some of them are just a clever use of :before and :after pseudo elements.

In the past we have created CSS3 Button Hover Effect or CSS3 preloader and in this tutorial we will recreate a simple glitch hover effect using pure CSS.

VIEW DEMO

1. HTML AND CSS

CSS Glitch Effect HTML

Firstly we will create a simple a element with a class .glitch.

<a href="#" class="glitch">17</a>

This could be anything, but I use my favorite number 17!

We will style it and center it on the page.

.glitch {
    font-size: 130px;
    line-height: 1;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    text-decoration: none;
    color: #fff;
}

Then we will create two css pseudo elements :before and :after.

.glitch {
    /* previous code */
    &:before, &:after {
        display: block;
        content: '17';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        opacity: .8;
    } &:after {
        color: #f0f;
        z-index: -2;
    } &:before {
        color: #0ff;
    	z-index: -1;
    }
}

The :before and :after elements are simple “duplicates” of what the main element contains. In our example this is content: '17'.

These two elements are positioned right behind the main element.

To create a very convincing glitch effects the colors of these elements are very bright saturated colors blue (#0ff) and purple (#f0f).

2. CSS3 Hover Animation

CSS Glitch Effect CSS3 Animation

Now that all 3 elements are sitting on top of each other, we will create the CSS3 animation.

@keyframes glitch {
    0% {
        transform: translate(0)
    }
    20% {
        transform: translate(-5px, 5px)
    }
    40% {
        transform: translate(-5px, -5px)
    }
    60% {
        transform: translate(5px, 5px)
    }
    80% {
        transform: translate(5px, -5px)
    }
    to {
        transform: translate(0)
    }
}

Here we are creating 6 keyframes and moving the element using the transform: translate property.

It starts and ends at translate(0), which means that the elements will always end up at the original CSS position.

Now we will trigger the animation on hover.

.glitch {
    /* previous code */
    &:hover {
        &:before {
            animation: glitch .3s cubic-bezier(.25, .46, .45, .94) both infinite
        }
        &:after {
            animation: glitch .3s cubic-bezier(.25, .46, .45, .94) reverse both infinite
        }
    }
}

CSS3 Animation Breakdown

We are using the shorthand to write our CSS3 animation on one line.

animation: glitch .3s cubic-bezier(.25, .46, .45, .94) both infinite

The shorthand takes 5 animation properties:

  • animation-name,
  • animation-duration,
  • animation-timing-function (easing),
  • animation-fill-mode and
  • animation-iteration-count

Check out this CSS Tricks animation article for more details.

Both pseudo elements will use the same animation (glitch), duration (.3s), easing (cubic-bezier), fill-mode (both), iteration-count (infinite).

To make the effect more random we are setting the animation-direction for the :after element to reverse.

This will make it go in the reversed direction than the :before element animation.

4864

To see exactly how the elements are moving, check out this slow version of the animation.

4864

3. Different color and size variations

Now lets create multiple variations by changing the size, color and animation duration.

4864

On the smaller elements you only need to move the pseudo elements by 1 or 2 pixels.

You can also play with the number of keyframes to achieve different results.

Remember there is no “perfect glitch”, it’s OK if it feels random.

Conclusion

The glitch effect can bring some very unique style to your site, but can be also very distracting if you overuse it. Glitch responsibly!

What do you think about the use of glitch effect? Have you seen any other sites using it?

Let me know in the comments.

29 thoughts on “How To Create CSS Glitch Effect”

  1. Vitaliy

    As for me, glitch effect better looks with digits on a dark background. It is perfect to emphasize link hover.

    Some different glitch effect with CSS in the following pen http://codepen.io/nilbog/pen/azVZZY.

    Also, for ‘content’ property into pseudo elements, we can use ‘attr()’ CSS function to duplicate a content. Example:

    <a href="#" class="glitch" data-glitch="17">17</a>

    .glitch:before, 
.glitch:after { 
  content: attr(data-glitch) 
}

    Sorry, for my English.

    Reply ↓
    1. Petr Tichy Post author

      Thanks for the link Vitaly. And you are right the content of the :before and :after elements can be taken from the data-attribute of the main element. Thanks for pointing it out.

      You English is better than mine 🙂

      Reply ↓
  2. Tim Jensen

    Really cool post Petr, thanks for writing!

    Petr you could look at this site and work out how the glitch effect on the image is created 🙂
    http://www.designembraced.com/

    Reply ↓
  3. Omar Zeidan

    Great, thanks for sharing.

    Maybe using the 3d transformation will give a better performance when it comes to painting and frames.

    You rock! Thanks.

    Reply ↓
  4. Andrei

    Hey Petr,
    Good tutorial keep doing, I am curious how make pixel-perfect ? I know is an app on chrome for pixel perfect but is other stuff?
    Thanks

    Reply ↓
  6. Kabolobari

    You wanna know what I think about the “glitch” effect? It’s in your final words, “glitch responsibly.” Yes, glitch responsibly. Thanks for sharing this. Now, I gotta go grab me some tomatoes.

    Reply ↓
  14. abdo arbab

    i also have used the before & after in my css poject you can check it out at https://github.com/the94air/FunCheckbox

    Reply ↓
  15. Peter

    Hey Petr!

    Great Tutorial! Thanks! The Page of kikk.be is awesome. Do you know the soultion for the animation effect of the bubble?

    Best regards

    Peter

    Reply ↓
  18. PDussault

    I can’t recall the name of this effect, but glitch is certainly not it. More like an offset color print effect, or maybe lens aberration?
    Not glitch.

    Reply ↓

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.