DEV Community

Cover image for How to create Glitch Effect 🤖 Pure CSS
Roden
Roden

Posted on • Updated on

How to create Glitch Effect 🤖 Pure CSS

Introduction

Today I would like to talk about how to make a Glitch effect using CSS. To do this, I will use one of the most popular options. This is when we use pseudo-elements to create copies of the main element.

Demo

HTML

In the HTML section, we need to create just 1 tag, inside which you should write the text, and also duplicate it in the data-text attribute.

Like that:

<h1 class="glitch" data-text="Glitch">Glitch</h1>
Enter fullscreen mode Exit fullscreen mode

You can specify any tag. It is not necessary to use text tags.

Alt Text

CSS

We need to take into account that the pseudo-elements of our text should be located approximately at the same position as the main text.

Therefore, for pseudo-elements, we need to specify the position property with the value absolute.

.glitch {
    position: relative;

    &::before,
    &::after {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
    }
}
Enter fullscreen mode Exit fullscreen mode

Now our text and its copies are on top of each other.

Before we continue creating the Glitch effect, it would be nice to add styles to our text to make it look more beautiful.

To do this, I will make our sans-serif font, the font size is larger, we create shadows and a linear gradient that completely copies our text.

.glitch {
    position: relative;
    font-family: sans-serif;
    font-size: 7em;
    text-transform: uppercase;
    text-shadow: 6px -6px 0px #fd5f00;
    background: repeating-linear-gradient(45deg, #005792, #005792 1px, #fff 2px, #fff 3px);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
Enter fullscreen mode Exit fullscreen mode

Result:
Alt Text

Changing pseudo-elements

Now we need to shift each of our pseudo-elements in different directions. This is necessary in order to create the effect of shifting the text, as it happens during glitches.

To do this, we need to move each pseudo-element in the opposite direction from each other by a couple of pixels.

  &::before {
    left: 7px;
    text-shadow: 1px 0 #fd5f00;
  }

  &::after {
    left: 3px;
    text-shadow: -1px 0 #fd5f00;
  }
Enter fullscreen mode Exit fullscreen mode

I decided to make the color of the pseudo-elements shadows the same as the main one, but you can make them different, in order to achieve the effect of a broken TV using black and blue colors.

Clip

Next, we need to use the clip property.

The clip property defines the area of the positioned element in which its contents will be displayed. Anything that doesn't fit in this area will be cut off and become invisible.

Alt Text

We use this property to alternately display the cropped parts of our pseudo elements.

Syntax:

clip: rect(Y1, X1, Y2, X2);

The values are the distance from the edge of the element to the clipping area.

clip: rect(top/right/bottom/left);

Therefore, in order to completely crop our pseudo-elements, we set an indent of 900 pixels on the right side. (You can use any value depending on the size of your element)

  &::before,
  &::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: $secondaryColor;
    color: $primaryColor;
    clip: rect(0, 900px, 0, 0);
    overflow: hidden;
  }
Enter fullscreen mode Exit fullscreen mode

It is very important that the background property of pseudo-elements is exactly the same as that of the background, so that they merge and there are no problems with the display.

Alt Text

Clip Animation

In order to qualitatively animate our elements, we need to create a step-by-step animation, where we will change the first and third values in the clip property, so that our pseudo-elements are displayed only in parts during the animation from top to bottom.

In this case, the second and fourth values of the clip property must be unchanged.

$steps: 20;

@keyframes glitch-effect{
    @for $i from 0 through $steps{
        #{percentage($i*(1/$steps))}{
            clip: rect(random(100) + px, 9999px, random(100) + px, 0);
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Personally, I use a 20-step animation, but you can specify any number of steps, since the animation is still random and generates changes in the values of the clip property itself. The more steps you specify, the faster the animation will be.

And now we just need to attach our animation to our two pseudo-elements. You also need to specify a different animation playback time for each pseudo-element. To achieve a more chaotic glitch animation effect.

  &::before {
    left: 7px;
    text-shadow: 1px 0 #fd5f00;
    animation: glitch-effect 3s infinite linear alternate-reverse;
  }

  &::after {
    left: 3px;
    text-shadow: -1px 0 #fd5f00;
    animation: glitch-effect 2s infinite linear alternate-reverse;
  }
Enter fullscreen mode Exit fullscreen mode

It's all.

The End

Well, that's it. This was a very simple and very popular way to create a glitch effect on pure CSS. Thank you very much for your time on my post.

Don't switch.
Alt Text

Top comments (13)

Collapse
 
afif profile image
Temani Afif

clip is deprecated, you should consider clip-path instead or mask.
Here is my idea using mask: dev.to/afif/still-100-css-loaders-... (loader #5 in the Classic IV)

Collapse
 
kerthin profile image
Roden

Thank you for advice. I know that the clip property is already outdated, I just didn't want to recycle the working vanilla version. 😊

Collapse
 
afif profile image
Temani Afif

yes, but it may stop working at any time 😉

Thread Thread
 
kerthin profile image
Roden

Here you are definitely right, I should then redo it to clip-path. Thanks

Collapse
 
breero profile image
Bree Owen

Do you have instructions for doing this with a picture instead of text?

Collapse
 
kerthin profile image
Roden

Unfortunately, not yet, I planned to make them in the future.

Collapse
 
kamori profile image
Tyler Coil

This is excellent! Now I know how to give my old geocities site the look and feel it deserves. With lagging scrolling and everything

Collapse
 
abrahamn profile image
Abraham

How to*

But good article

Collapse
 
breero profile image
Bree Owen

Wow this is so cool thank you for sharing!!!

Collapse
 
spock123 profile image
Lars Rye Jeppesen

Very cool man, cheers

Collapse
 
kerthin profile image
Roden

Thanks 🎉

Collapse
 
ayoaduwo profile image
Fola

Wow!

Collapse
 
hiddon11 profile image
hiddon11

This is really helpful while developing AppLinked App. Get it from applinked.me/