Roden

Posted on Aug 20, 2021 • Edited on Aug 22, 2021

How to create Glitch Effect 🤖 Pure CSS

#webdev #css #tutorial #beginners

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>

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

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;
    }
}

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;
}

Result:

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;
  }

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.

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;
  }

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.

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);
        }
    }
}

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;
  }

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.

Top comments (13)

Temani Afif • Aug 20 '21

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)