Shake Glitch

CSS

/* Shake Glitch — generated with TEXT-FX
 * HTML: the element needs a data-text attribute equal to its text.
 * Font: 'Major Mono Display', monospace (load from Google Fonts).
 */

.text-effect {
  font-family: 'Major Mono Display', monospace;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.text-effect {
  position: relative;
  color: #f4f4f4;
}
.text-effect::before,
.text-effect::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}
.text-effect::before {
  color: #00e5ff;
  animation: text-effect-shakeA 0.400s steps(1, end) infinite;
}
.text-effect::after {
  color: #ff2bb0;
  animation: text-effect-shakeB 0.508s steps(1, end) infinite;
}

@keyframes text-effect-shakeA {
  0%   { transform: translate(-2.3px, 0.92px); }
  20%  { transform: translate(1.38px, -1.15px); }
  40%  { transform: translate(-1.15px, -0.46px); }
  60%  { transform: translate(2.3px, 0.69px); }
  80%  { transform: translate(-0.69px, 1.38px); }
  100% { transform: translate(-2.3px, 0.92px); }
}
@keyframes text-effect-shakeB {
  0%   { transform: translate(2.3px, -0.92px); }
  20%  { transform: translate(-1.15px, 1.15px); }
  40%  { transform: translate(0.92px, 0.69px); }
  60%  { transform: translate(-2.3px, -0.69px); }
  80%  { transform: translate(0.69px, -1.38px); }
  100% { transform: translate(2.3px, -0.92px); }
}

HTML

This effect needs the markup below (per-letter spans, SVG defs, or a data-text attribute).

<style>
.text-effect {
  font-family: 'Major Mono Display', monospace;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.text-effect {
  position: relative;
  color: #f4f4f4;
}
.text-effect::before,
.text-effect::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}
.text-effect::before {
  color: #00e5ff;
  animation: text-effect-shakeA 0.400s steps(1, end) infinite;
}
.text-effect::after {
  color: #ff2bb0;
  animation: text-effect-shakeB 0.508s steps(1, end) infinite;
}

@keyframes text-effect-shakeA {
  0%   { transform: translate(-2.3px, 0.92px); }
  20%  { transform: translate(1.38px, -1.15px); }
  40%  { transform: translate(-1.15px, -0.46px); }
  60%  { transform: translate(2.3px, 0.69px); }
  80%  { transform: translate(-0.69px, 1.38px); }
  100% { transform: translate(-2.3px, 0.92px); }
}
@keyframes text-effect-shakeB {
  0%   { transform: translate(2.3px, -0.92px); }
  20%  { transform: translate(-1.15px, 1.15px); }
  40%  { transform: translate(0.92px, 0.69px); }
  60%  { transform: translate(-2.3px, -0.69px); }
  80%  { transform: translate(0.69px, -1.38px); }
  100% { transform: translate(2.3px, -0.92px); }
}
</style>

<div data-text="Your text" class="text-effect">Your text</div>

Related Glitch & Distortion effects

• Glitch
• Scanline Glitch
• VHS