CSSKit

CSS Underline Generator | Text Decoration Customizer - CSSKit

Free CSS underline generator. Customize text underline decorations with style, color, thickness, and offset. Create wavy, dotted, and dashed underlines.

2px
4px
24px
The quick brown fox jumps over the lazy dog
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: #4f46e5;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
color: #1f2937;
font-size: 24px;
text-decoration: underline solid #4f46e5 2px;
text-underline-offset: 4px;
color: #1f2937;
font-size: 24px;

What is CSS Underline Generator?

CSS Underline Generator is a free online tool for customizing text underline decorations. It uses modern CSS text-decoration properties to create solid, dotted, dashed, double, and wavy underlines with custom colors, thickness, and offset.

How to Use CSS Underline Generator

Type your preview text. Select the text-decoration-line type (underline, overline, line-through, or combinations). Choose a decoration style: solid, double, dotted, dashed, or wavy. Pick the underline color. Adjust thickness and offset. Preview the result live and copy the CSS code.

How CSS Underline Generator Works

The tool uses CSS text-decoration shorthand and its sub-properties: text-decoration-line, text-decoration-style, text-decoration-color, text-decoration-thickness, and text-underline-offset. As you adjust each control, the preview text updates in real time and the complete CSS code is generated.

Common Use Cases

  • Creating custom link underline styles
  • Designing decorative text headings
  • Building wavy underline effects for emphasis
  • Customizing text strike-through effects
  • Creating overline decorations for design elements

Frequently Asked Questions

What underline styles are available?▼

CSS supports solid, double, dotted, dashed, and wavy underline styles via the text-decoration-style property.

Can I change the underline color separately from the text?▼

Yes, text-decoration-color lets you set the underline color independently from the text color.

Can I adjust the distance between text and underline?▼

Yes, text-underline-offset controls the distance between the text baseline and the underline. Positive values move it down, negative values move it up.

Does wavy underline work in all browsers?▼

Yes, text-decoration-style: wavy is supported in all modern browsers including Chrome, Firefox, Safari, and Edge.

Related Tools

CSS Text Shadow Generator

Free CSS text-shadow generator. Create stunning text shadow effects with live pr...

CSS Border Generator

Free CSS border generator. Create borders with custom width, style, color, and b...

CSS Animation Generator

Free CSS animation generator. Create keyframe animations with visual controls fo...

CSS Filter Generator

Free CSS filter generator. Apply blur, brightness, contrast, grayscale, hue-rota...