Equalizer Bars

Fill & Texture · Animated · pure CSS

Each glyph is filled with a bank of neon columns whose heights bounce independently on their own timers, like a music visualizer's bar meter poured into your letters. It's pure CSS rhythm with a dark in-glyph base and a faint neon outline — no audio involved, it just looks like it's dancing to a track.

Open in the generator →All effects
Equalizer Bars

How it works

Equalizer Bars is an animated fill & texture text effect rendered entirely in CSS. It animates a registered CSS @property, which keeps the motion smooth and GPU-friendly.

Controls

Equalizer Bars exposes 6 dedicated controls — Hue, Color, Spectrum Spread, Bars, Bar Width and Bounce — 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

/* Equalizer Bars — 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).
 */

@property --text-effect-h0 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 36%;
}

@property --text-effect-h1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 65%;
}

@property --text-effect-h2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 89%;
}

@property --text-effect-h3 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 88%;
}

@property --text-effect-h4 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 34%;
}

@property --text-effect-h5 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 37%;
}

@property --text-effect-h6 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 63%;
}

@property --text-effect-h7 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 34%;
}

@property --text-effect-h8 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 52%;
}

@property --text-effect-h9 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 33%;
}

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

.text-effect {
  --text-effect-h0: 36%;
  --text-effect-h1: 65%;
  --text-effect-h2: 89%;
  --text-effect-h3: 88%;
  --text-effect-h4: 34%;
  --text-effect-h5: 37%;
  --text-effect-h6: 63%;
  --text-effect-h7: 34%;
  --text-effect-h8: 52%;
  --text-effect-h9: 33%;
  background:
    linear-gradient(90deg, transparent 0 1.6%, hsl(106 92% 60%) 1.6% 8.4%, transparent 8.4%) center bottom / 100% var(--text-effect-h0) no-repeat,
    linear-gradient(90deg, transparent 0 11.6%, hsl(137 92% 60%) 11.6% 18.4%, transparent 18.4%) center bottom / 100% var(--text-effect-h1) no-repeat,
    linear-gradient(90deg, transparent 0 21.6%, hsl(168 92% 60%) 21.6% 28.4%, transparent 28.4%) center bottom / 100% var(--text-effect-h2) no-repeat,
    linear-gradient(90deg, transparent 0 31.6%, hsl(199 92% 60%) 31.6% 38.4%, transparent 38.4%) center bottom / 100% var(--text-effect-h3) no-repeat,
    linear-gradient(90deg, transparent 0 41.6%, hsl(230 92% 60%) 41.6% 48.4%, transparent 48.4%) center bottom / 100% var(--text-effect-h4) no-repeat,
    linear-gradient(90deg, transparent 0 51.6%, hsl(261 92% 60%) 51.6% 58.4%, transparent 58.4%) center bottom / 100% var(--text-effect-h5) no-repeat,
    linear-gradient(90deg, transparent 0 61.6%, hsl(292 92% 60%) 61.6% 68.4%, transparent 68.4%) center bottom / 100% var(--text-effect-h6) no-repeat,
    linear-gradient(90deg, transparent 0 71.6%, hsl(323 92% 60%) 71.6% 78.4%, transparent 78.4%) center bottom / 100% var(--text-effect-h7) no-repeat,
    linear-gradient(90deg, transparent 0 81.6%, hsl(354 92% 60%) 81.6% 88.4%, transparent 88.4%) center bottom / 100% var(--text-effect-h8) no-repeat,
    linear-gradient(90deg, transparent 0 91.6%, hsl(25 92% 60%) 91.6% 98.4%, transparent 98.4%) center bottom / 100% var(--text-effect-h9) no-repeat;
  background-color: hsl(106 48% 15%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-text-stroke: 0.75px hsl(106 55% 55% / 0.5);
  filter: drop-shadow(0 0 5px hsl(106 95% 60% / 0.35));
  animation: text-effect-b0 1.81s ease-in-out -1.02s infinite, text-effect-b1 1.95s ease-in-out -0.24s infinite, text-effect-b2 1.13s ease-in-out -0.96s infinite, text-effect-b3 1.32s ease-in-out -0.05s infinite, text-effect-b4 1.81s ease-in-out -1.02s infinite, text-effect-b5 1.42s ease-in-out -0.08s infinite, text-effect-b6 1.92s ease-in-out -1.69s infinite, text-effect-b7 1.07s ease-in-out -0.15s infinite, text-effect-b8 2.1s ease-in-out -1.44s infinite, text-effect-b9 2.14s ease-in-out -1.61s infinite;
}

@keyframes text-effect-b0 {
  0%, 100% { --text-effect-h0: 36%; }
  20% { --text-effect-h0: 81%; }
  40% { --text-effect-h0: 67%; }
  60% { --text-effect-h0: 80%; }
  80% { --text-effect-h0: 93%; }
}

@keyframes text-effect-b1 {
  0%, 100% { --text-effect-h1: 65%; }
  20% { --text-effect-h1: 89%; }
  40% { --text-effect-h1: 82%; }
  60% { --text-effect-h1: 91%; }
  80% { --text-effect-h1: 69%; }
}

@keyframes text-effect-b2 {
  0%, 100% { --text-effect-h2: 89%; }
  20% { --text-effect-h2: 42%; }
  40% { --text-effect-h2: 90%; }
  60% { --text-effect-h2: 38%; }
  80% { --text-effect-h2: 36%; }
}

@keyframes text-effect-b3 {
  0%, 100% { --text-effect-h3: 88%; }
  20% { --text-effect-h3: 32%; }
  40% { --text-effect-h3: 91%; }
  60% { --text-effect-h3: 43%; }
  80% { --text-effect-h3: 31%; }
}

@keyframes text-effect-b4 {
  0%, 100% { --text-effect-h4: 34%; }
  20% { --text-effect-h4: 54%; }
  40% { --text-effect-h4: 84%; }
  60% { --text-effect-h4: 45%; }
  80% { --text-effect-h4: 65%; }
}

@keyframes text-effect-b5 {
  0%, 100% { --text-effect-h5: 37%; }
  20% { --text-effect-h5: 60%; }
  40% { --text-effect-h5: 24%; }
  60% { --text-effect-h5: 34%; }
  80% { --text-effect-h5: 68%; }
}

@keyframes text-effect-b6 {
  0%, 100% { --text-effect-h6: 63%; }
  20% { --text-effect-h6: 31%; }
  40% { --text-effect-h6: 47%; }
  60% { --text-effect-h6: 78%; }
  80% { --text-effect-h6: 93%; }
}

@keyframes text-effect-b7 {
  0%, 100% { --text-effect-h7: 34%; }
  20% { --text-effect-h7: 31%; }
  40% { --text-effect-h7: 43%; }
  60% { --text-effect-h7: 87%; }
  80% { --text-effect-h7: 63%; }
}

@keyframes text-effect-b8 {
  0%, 100% { --text-effect-h8: 52%; }
  20% { --text-effect-h8: 47%; }
  40% { --text-effect-h8: 62%; }
  60% { --text-effect-h8: 60%; }
  80% { --text-effect-h8: 69%; }
}

@keyframes text-effect-b9 {
  0%, 100% { --text-effect-h9: 33%; }
  20% { --text-effect-h9: 58%; }
  40% { --text-effect-h9: 37%; }
  60% { --text-effect-h9: 69%; }
  80% { --text-effect-h9: 57%; }
}

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

Category
Fill & Texture
Type
Animated
Browser support
background-clip:text + animated @property <percentage> bar heights
Capabilities
pure, property

Related Fill & Texture effects