← 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.

Duration
3s
Resolution
1440×900
Format
CSS
squigglewavy-underlinetext-decorationthicknessprefers-reduced-motion

Squiggle Underline / Text-decoration Thickness

Wavy Underline Thickness Control

Native wavy underline styling changes visual weight with text-decoration-thickness and offset rather than drawing a separate SVG underline.

inline link wavy underline - 2.8s cycle · 0.62 intensity

Read the motion note

Thin wave · body copy

Inline Link

A thin squiggle keeps inline text readable while still signaling emphasis.

The underline weight breathes subtly by changing decoration thickness and underline offset.

  • wavy underline
  • em thickness
  • inline

Selected primitive

Broader wave · headline

Editorial Mark

A thicker underline carries a headline highlight without inserting a positioned decoration layer.

Thickness changes stay below the descender collision threshold.

  • headline
  • offset
  • descender guard

No custom SVG required

Compact copy · fixed offset

Dense Callout

A compact callout uses a stable offset and only modest thickness changes.

The underline animates independently from layout metrics and never changes text width.

  • dense UI
  • native CSS
  • stable offset

Underline inspector

Inline Link

Read the motion note

Motion contract
The underline weight breathes subtly by changing decoration thickness and underline offset.
Accessibility
The native text decoration remains visible in static and reduced-motion modes.

Use em-based thickness so the underline scales with font size and zoom.

css
.squiggle-text {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #38bdf8;
  text-decoration-thickness: calc(0.08em * 0.62);
  text-underline-offset: calc(0.18em + 0.05em * 0.62);
  animation: squiggleWeight 2.80s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .squiggle-text { animation: none; }
}