CSS Underline Generator

Create beautiful text underlines with multiple styles.
Customize color, thickness, and offset with live preview.

Underlined Text

Underline Style

Underline Color

Thickness3px

Offset from Text4px

CSS Code

text-decoration: underline;
text-decoration-style: solid;
text-decoration-color: #3b82f6;
text-decoration-thickness: 3px;
text-underline-offset: 4px;

Need underline styles from real sites instead?

Frontend Hero's CSS Scanner lets you extract any text style from any website in 2 clicks. See how top designers create their beautiful underlines.

Get Frontend Hero now →

Create grid layouts visually

Create flex layouts visually

Create custom gradients

Gradient text effects

275+ ready-to-use gradients

Design multi-layer shadows

Style text highlight colors

Style custom scrollbars

Mix colors with blend modes

Preview all cursor styles

Create loading animations

Design buttons with hover effects

Create neon glow effects

Scale text across screen sizes