Wavy Underline

Underline & Decoration · Static · pure CSS

A colored wavy squiggle underline via text-decoration. Friendly, informal emphasis.

Open in the generator →All effects
Wavy Underline

CSS

/* Wavy Underline — generated with TEXT-FX
 * HTML: just put the class on any element.
 * Font: 'Anton', sans-serif (load from Google Fonts).
 */

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

.text-effect {
  color: hsl(210 25% 96%);
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: hsl(210 90% 62%);
  text-decoration-thickness: 4px;
  text-underline-offset: 5px;
  text-decoration-skip-ink: none;
}

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

Category
Underline & Decoration
Type
Static
Browser support
text-decoration-style:wavy (all modern browsers)
Capabilities
pure

Related Underline & Decoration effects