30 CSS Hover Effects 03 / 30

CSS Letter Spacing Expand Hover Effect

Five typographic hover states that animate letter-spacing from tight to airy — standard expand, collapse-in, stagger fade-out, per-letter scale, and tracking shift with fade — demonstrating how spacing transitions alone can carry expressive weight.

Pure CSS MIT licensed
Live Demo Open in tab

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

Open in playground

The code

<div class="hv-03">
  <div class="hv-03__stack">
    <div class="hv-03__row">
      <span class="hv-03__word hv-03__word--expand">EXPAND</span>
      <span class="hv-03__tag">letter-spacing expand</span>
    </div>
    <div class="hv-03__row">
      <span class="hv-03__word hv-03__word--collapse">COLLAPSE</span>
      <span class="hv-03__tag">tracking collapse-in</span>
    </div>
    <div class="hv-03__row">
      <span class="hv-03__word hv-03__word--fade">
        <span>D</span><span>R</span><span>I</span><span>F</span><span>T</span>
      </span>
      <span class="hv-03__tag">stagger fade-out</span>
    </div>
    <div class="hv-03__row">
      <span class="hv-03__word hv-03__word--bold">BOLD TRACK</span>
      <span class="hv-03__tag">weight + spacing</span>
    </div>
    <div class="hv-03__row">
      <span class="hv-03__word hv-03__word--glow">RADIANCE</span>
      <span class="hv-03__tag">spacing + glow</span>
    </div>
  </div>
</div>
.hv-03,.hv-03 *,.hv-03 *::before,.hv-03 *::after{box-sizing:border-box;margin:0;padding:0}
.hv-03 ::selection{background:#7c3aed;color:#fff}
.hv-03{
  --bg:#0d0d14;
  --text:#ede9fe;
  --dim:#6b7280;
  --purple:#a78bfa;
  --pink:#f472b6;
  --cyan:#67e8f9;
  --amber:#fbbf24;
  --white:#fff;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:60px 24px;
}
.hv-03__stack{
  display:flex;flex-direction:column;gap:16px;
  width:min(700px,100%);
}
.hv-03__row{
  display:flex;align-items:center;justify-content:space-between;
  padding:28px 36px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  gap:20px;
  overflow:hidden;
}
.hv-03__tag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap;flex-shrink:0}

/* shared word base */
.hv-03__word{
  font-size:clamp(1.4rem,4vw,2rem);font-weight:700;
  cursor:default;display:inline-block;
  transition:letter-spacing .4s cubic-bezier(.4,0,.2,1),color .4s,opacity .4s;
}

/* 1 — standard expand */
.hv-03__word--expand{color:var(--purple);letter-spacing:.02em}
.hv-03__word--expand:hover{letter-spacing:.35em;color:var(--text)}

/* 2 — collapse-in */
.hv-03__word--collapse{color:var(--pink);letter-spacing:.4em}
.hv-03__word--collapse:hover{letter-spacing:.02em;color:var(--white)}

/* 3 — stagger via nth-child span */
.hv-03__word--fade{
  display:inline-flex;gap:0;
  font-size:clamp(1.4rem,4vw,2rem);font-weight:700;
  color:var(--cyan);letter-spacing:.02em;
}
.hv-03__word--fade span{
  display:inline-block;
  transition:letter-spacing .4s cubic-bezier(.4,0,.2,1),opacity .4s;
}
.hv-03__word--fade:hover span{letter-spacing:.2em;opacity:.3}
.hv-03__word--fade span:nth-child(1){transition-delay:.00s}
.hv-03__word--fade span:nth-child(2){transition-delay:.04s}
.hv-03__word--fade span:nth-child(3){transition-delay:.08s}
.hv-03__word--fade span:nth-child(4){transition-delay:.12s}
.hv-03__word--fade span:nth-child(5){transition-delay:.16s}

/* 4 — bold + tracking */
.hv-03__word--bold{color:var(--amber);letter-spacing:.02em;font-weight:400;transition:letter-spacing .35s,font-weight .35s,color .35s}
.hv-03__word--bold:hover{letter-spacing:.25em;font-weight:900;color:var(--white)}

/* 5 — spacing + glow */
.hv-03__word--glow{
  color:var(--text);letter-spacing:.06em;
  transition:letter-spacing .5s cubic-bezier(.4,0,.2,1),text-shadow .5s,color .5s;
}
.hv-03__word--glow:hover{
  letter-spacing:.3em;
  color:#fff;
  text-shadow:0 0 20px var(--purple),0 0 60px var(--pink);
}

@media(max-width:520px){.hv-03__row{flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){
  .hv-03__word,.hv-03__word--fade span{transition:none!important}
}

How this works

CSS letter-spacing transitions smoothly between two length values, making it ideal for expressive typographic hover states. Each variant pairs the spacing change with a complementary property: opacity on the fade variants, color to shift tone, and font-weight for the bold-expand style. Using transition-timing-function: cubic-bezier(.4,0,.2,1) gives a natural deceleration that feels physical rather than mechanical.

The stagger effect wraps each letter in a span and uses :nth-child selectors to apply incrementally larger transition-delay values so characters animate sequentially. The collapse-in variant starts at a wide tracking (letter-spacing: .5em) and collapses to normal on hover, creating a converging motion that feels like the word is snapping into focus.

Customize

  • Dial the spread by adjusting the hover-state letter-spacing: .3em feels editorial, .6em reads as display-scale.
  • Add a font-weight change on hover — font-weight: 700 combined with letter-spacing expansion avoids FOUT since the weight is pre-loaded.
  • Slow the transition by increasing transition-duration to .6s for a more meditative, luxury-brand feel.
  • Combine with a subtle translateY(-2px) transform to add a slight upward lift that reinforces the expanding motion.
  • For the stagger variant, increase transition-delay increments (.05s steps) for a more pronounced wave across longer words.

Watch out for

  • letter-spacing adds space after the last character too, which can cause the text to appear off-center — compensate by adding equal negative margin-right.
  • The stagger technique requires each character wrapped in a span — without JavaScript this must be done in markup, making it impractical for dynamic content.
  • Very large letter-spacing values can exceed the container width and trigger a horizontal scrollbar — ensure the parent has overflow: hidden.

Browser support

ChromeSafariFirefoxEdge
60+ 10.1+ 55+ 60+

letter-spacing transitions are universally supported — no caveats for modern browsers.

More from 30 CSS Hover Effects

CSS Spotlight Card Hover EffectCSS Slide Reveal Card Hover EffectCSS Stack Lift Card Hover EffectCSS Zoom Pan Image Hover EffectCSS Color Channel Split Hover EffectCSS Duotone Image Hover EffectCSS Curtain Reveal Image Hover EffectCSS Ken Burns Image Hover EffectCSS Image Tilt Depth Hover EffectCSS Underline Slide Nav Hover EffectCSS Highlight Fill Nav Hover EffectCSS Strikethrough Hover Link Effect
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →