CSS Glitched Text Generator

CSS Glitched Text Generator

codegeneratorcolorgradientcss

Keyboard Shortcuts

ShortcutAction
kSearch all tools
hShow keyboard shortcuts

Generate CSS code for glitched text effects.

Ads are disabled, if you wish to support me please consider disabling your ad blocker.

1 80 1000

Glitched Text

<div class="glitch-wrapper">
   <div class="glitch" data-glitch="glitch">glitch</div>
</div>

<style>
.glitch-wrapper {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
}

.glitch {
   position: relative;
   font-size: 80px;
   font-weight: 700;
   color: #000;
   letter-spacing: 5px;
   font-family: 'Arial', sans-serif;
   z-index: 1;
}

.glitch:before,
.glitch:after {
   display: block;
   content: attr(data-glitch);
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0.8;
}

.glitch:before {
   animation: glitch-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
   color: $GLITCH_COLOR_1$;
   z-index: -1;
}

.glitch:after {
   animation: glitch-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
   color: $GLITCH_COLOR_2$;
   z-index: -2;
}

@keyframes glitch-color {
   0% {
      transform: translate(0);
   }

   20% {
      transform: translate(-3px, 3px);
   }

   40% {
      transform: translate(-3px, -3px);
   }

   60% {
      transform: translate(3px, 3px);
   }

   80% {
      transform: translate(3px, -3px);
   }

   to {
      transform: translate(0);
   }
}
</style>

Every Glitch

Glitch Text

Glitch Text

Glitched Text

Noisy Glitch

Ads are disabled, if you wish to support me please consider disabling your ad blocker.