CRT Collapse

Glitch & Distortion · Animated · pure CSS

An old CRT tube snapping on: the word pinches to a blinding horizontal line, flickers, then punches open with a fast vertical overshoot before settling into crisp, phosphor-tinted text. A one-shot power-on entrance — hover to trigger it again.

Open in the generator →All effects
CRT Collapse

How it works

CRT Collapse is an animated glitch & distortion text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.

Controls

CRT Collapse exposes 2 dedicated controls — Hue and Speed — on top of the shared type controls (font, weight, letter-spacing and case). Open it in the generator to tune every value live, then copy the updated CSS.

CSS

/* CRT Collapse — made with TEXT-FX · https://text-fx.app
 * HTML: just put the class on any element.
 * Font: 'Archivo Black', sans-serif (load from Google Fonts).
 */

.text-effect {
  font-family: 'Archivo Black', sans-serif;
  font-weight: 700;
  letter-spacing: 8px;
  text-transform: none;
}

.text-effect {
  position: relative;
  display: inline-block;
  color: hsl(150 35% 90%);
  text-shadow: 0 0 2px hsl(150 70% 60%), 0 0 6px hsl(150 70% 60%);
  transform-origin: center;
  will-change: transform, filter;
  animation: text-effect-power 1.3s cubic-bezier(.16,.84,.32,1) both;
}
.text-effect::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: .14em;
  background: hsl(150 55% 92%);
  box-shadow: 0 0 .5em hsl(150 55% 92%), 0 0 1.2em hsl(150 70% 60%);
  transform: translateY(-50%) scaleX(.2);
  transform-origin: center;
  pointer-events: none;
  animation: text-effect-bar 1.3s steps(1, jump-end) both;
}
.text-effect:hover {
  animation-name: text-effect-power-r;
}
.text-effect:hover::after {
  animation-name: text-effect-bar-r;
}

@keyframes text-effect-power {
  0%   { opacity: 1; transform: scaleY(.02) scaleX(1); filter: brightness(7) saturate(1.6); }
  4%   { opacity: .5; transform: scaleY(.02) scaleX(1); filter: brightness(1.2) saturate(1); }
  8%   { opacity: 1; transform: scaleY(.02) scaleX(1.02); filter: brightness(8) saturate(1.7); }
  14%  { opacity: 1; transform: scaleY(.02) scaleX(1.02); filter: brightness(4.5) saturate(1.3); }
  30%  { opacity: 1; transform: scaleY(1.24) scaleX(1.16); filter: brightness(2.4) saturate(1.1); }
  44%  { opacity: 1; transform: scaleY(.9) scaleX(.96); filter: brightness(1.7); }
  58%  { opacity: 1; transform: scaleY(1.05) scaleX(1.02); filter: brightness(1.3); }
  72%  { opacity: 1; transform: scaleY(.99) scaleX(.995); filter: brightness(1.55); }
  100% { opacity: 1; transform: scaleY(1) scaleX(1); filter: brightness(1); }
}
@keyframes text-effect-bar {
  0%   { opacity: 0; transform: translateY(-50%) scaleX(.2); }
  3%   { opacity: 1; transform: translateY(-50%) scaleX(.45); }
  6%   { opacity: .25; transform: translateY(-50%) scaleX(.6); }
  8%   { opacity: 1; transform: translateY(-50%) scaleX(.9); }
  14%  { opacity: 1; transform: translateY(-50%) scaleX(1); }
  22%  { opacity: 0; transform: translateY(-50%) scaleX(1); }
  100% { opacity: 0; transform: translateY(-50%) scaleX(1); }
}
@keyframes text-effect-power-r {
  0%   { opacity: 1; transform: scaleY(.02) scaleX(1); filter: brightness(7) saturate(1.6); }
  4%   { opacity: .5; transform: scaleY(.02) scaleX(1); filter: brightness(1.2) saturate(1); }
  8%   { opacity: 1; transform: scaleY(.02) scaleX(1.02); filter: brightness(8) saturate(1.7); }
  14%  { opacity: 1; transform: scaleY(.02) scaleX(1.02); filter: brightness(4.5) saturate(1.3); }
  30%  { opacity: 1; transform: scaleY(1.24) scaleX(1.16); filter: brightness(2.4) saturate(1.1); }
  44%  { opacity: 1; transform: scaleY(.9) scaleX(.96); filter: brightness(1.7); }
  58%  { opacity: 1; transform: scaleY(1.05) scaleX(1.02); filter: brightness(1.3); }
  72%  { opacity: 1; transform: scaleY(.99) scaleX(.995); filter: brightness(1.55); }
  100% { opacity: 1; transform: scaleY(1) scaleX(1); filter: brightness(1); }
}
@keyframes text-effect-bar-r {
  0%   { opacity: 0; transform: translateY(-50%) scaleX(.2); }
  3%   { opacity: 1; transform: translateY(-50%) scaleX(.45); }
  6%   { opacity: .25; transform: translateY(-50%) scaleX(.6); }
  8%   { opacity: 1; transform: translateY(-50%) scaleX(.9); }
  14%  { opacity: 1; transform: translateY(-50%) scaleX(1); }
  22%  { opacity: 0; transform: translateY(-50%) scaleX(1); }
  100% { opacity: 0; transform: translateY(-50%) scaleX(1); }
}

Pure CSS — just add the .text-effect class to any element.

Category
Glitch & Distortion
Type
Animated
Browser support
filter brightness + transform scale entrance (all modern browsers)
Capabilities
pure

Related Glitch & Distortion effects