← Back to gallery
CSS

Wavy Underline Thickness Control

A native CSS wavy underline treatment that tunes text-decoration-thickness and underline offset without adding a separate decorative SVG layer.

squigglewavy-underlinetext-decorationthicknessprefers-reduced-motion

Wavy underline · text-decoration breathing

Wavy Underline Thickness Control

Native wavy underline styling changes visual weight with text-decoration-thickness and underline-offset rather than drawing a separate SVG underline. Three variants demonstrate a thin inline link, a broader editorial mark, and a compact dense callout.

Thin wave · body copy

Inline Link

A thin squiggle keeps inline text readable while still signaling emphasis. Em-based thickness so the underline scales with font size + browser zoom.

  • wavy underline
  • em thickness
  • inline

Broader wave · headline

Editorial Mark

A thicker underline carries a headline highlight without inserting a positioned decoration layer. Offset grows with thickness so descenders have breathing room.

  • headline
  • offset
  • descender guard

Compact copy · fixed offset

Dense Callout

A compact callout uses a stable offset and only modest thickness changes. Safer in dense UI where a large animated squiggle would crowd nearby text.

  • dense UI
  • native CSS
  • stable offset

Underline inspector

Inline Link

  • wavy underline
  • em thickness
  • inline

A thin squiggle keeps inline text readable while still signaling emphasis. Em-based thickness so the underline scales with font size + browser zoom.

.wavy-text {
  color: #e0f2fe;
  text-decoration: underline wavy #38bdf8;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.22em;
  /* Animate native CSS decoration props — no SVG, no separate
     positioned layer, no layout shift. */
  animation: wavy-breathe 2.40s ease-in-out infinite alternate;
}

@keyframes wavy-breathe {
  from {
    text-decoration-thickness: 0.06em;
    text-underline-offset: 0.22em;
  }
  to {
    text-decoration-thickness: 0.14em;
    text-underline-offset: 0.28em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wavy-text {
    animation: none;
    text-decoration-thickness: 0.1em;
  }
}