✏️ CSS Text Decoration Generator

Generate CSS text-decoration styles with live preview

Decoration Line

UnderlineOverlineLine-through

Decoration Style

Decoration Color

Decoration Thickness

Underline Offset

Preview Text

Live Preview

The quick brown fox jumps over the lazy dog

Generated CSS

text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: #3b82f6;
text-decoration-thickness: auto;
text-underline-offset: auto;

Properties

• text-decoration-line: Sets the type of decoration (underline, overline, line-through)
• text-decoration-style: Sets the style of the line (solid, double, dotted, dashed, wavy)
• text-decoration-color: Sets the color of the decoration
• text-decoration-thickness: Sets the thickness of the decoration line
• text-underline-offset: Sets the distance between underline and text