Privacy Protected

CSS Underline Generator

Create custom text decorations with thickness and offset control

Underline Style

Shape and appearance

Dimensions

Weight and positioning

2px
8px
48px

Interactive Preview

Visual effect on live typography

Modern Typography Decoration

CSS Decoration Code

Modern browser compatible snippets

text-decoration-line: underline;
text-decoration-thickness: 2px;
text-underline-offset: 8px;
text-decoration-style: solid;
text-decoration-color: #a81409;

CSS Underline Generator

Create highly customizable CSS underlines. Adjust thickness, offset, color, and style (wavy, dashed, dotted) with our visual editor.

1

Preview Text

Type your sample sentence to see the underline in context.

2

Choose Style

Select a decoration style like wavy, dotted, or dashed.

3

Global Weight

Adjust the thickness slider to set the stroke width.

4

Vertical Position

Use the offset slider to move the line closer or further from the text.

Master the art of text decoration with our CSS Underline Generator. Modern CSS provides powerful properties like text-underline-offset and text-decoration-thickness that allow for much more than just a simple line under text. Our visual editor lets you experiment with different styles—wavy for a playful look, dashed for emphasis, or solid for classic elegance. You can precisely control the distance from the baseline and the weight of the stroke to match your design system's aesthetic. Stop using hacky border-bottom solutions. Generate clean, modern CSS code that works natively on all text elements while maintaining perfect vertical alignment and readability.

Key Features

Thickness Control

Fine-tune the weight of the underline from sub-pixel to bold strokes.

Offset Adjustment

Control the vertical distance between the text and the underline.

Modern Styles

Switch between solid, wavy, dashed, and dotted underline patterns.

Inherit Colors

Easily match the underline color to your text or choose a custom accent.

Frequently Asked Questions

Yes, by using 'text-decoration-style: wavy'. Our tool generates the code needed to make this work.

The 'text-underline-offset' property allows you to push the underline away from the baseline for better readability.

Yes, most modern browsers support this property, allowing you to control the thickness without using borders.

Related Tools

View all

CSS Text Gradient Generator

Create beautiful gradient effects for typography.

CSS Gradient Generator

Create and customize linear and radial CSS gradients

CSS Pattern Generator

Create repeatable CSS background patterns.

CSS Text Shadow Generator

Create multi-layer text shadows.

CSS Cursor Generator

Interactive tool to design, preview and generate CSS for standard and custom mouse cursors.

CSS Scrollbar Styler

Visual editor to design and generate custom CSS code for Webkit-based scrollbars.


Last updated on