CSS text-decoration Generator (Underline, Wavy)

Modern CSS text-decoration goes far beyond underline — wavy, dotted, double, custom thickness, custom offset, custom color. Build the value visually and copy the CSS.

How to use the CSS text-decoration Generator (Underline, Wavy)

Pick the line type, style, color, thickness, and offset. The preview shows live text and the output is the full text-decoration declaration, including text-decoration-thickness and text-underline-offset where you set them.

Modern text-decoration, beyond the default underline

For years text-decoration meant a plain underline in the text color, fixed thickness, sitting right under the baseline. Modern CSS unbundled it: the line can be solid, double, dotted, dashed, or wavy; it can be any color independent of the text; and text-decoration-thickness and text-underline-offset control its weight and distance. That makes underlines that clear descenders, wavy spell-check style lines, and colored emphasis all reachable in pure CSS.

Set the line, style, color, thickness, and offset here and copy the declaration with a live preview. For decoration that sits behind or around text as a glow or drop effect rather than a line, use the text-shadow generator; to size the text itself, the typography scale generator.

Common use cases

• Better link underlines — add offset and thickness so the line clears descenders.
• Wavy emphasis — use a wavy line for a hand-marked or spell-check look.
• Colored underlines — set a decoration color that differs from the text.
• Strikethrough — style a line-through for prices or completed items.
• Dotted and dashed lines — mark glossary terms or annotations.