Privacy Protected

CSS Underline Generator

Create custom text decorations with thickness and offset control

Share Tool

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;

About CSS Underline Generator

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

JSON Formatter

Beautify and minify JSON.

Base64 Converter

Encode and decode Base64 strings (Standard).

Hash Generator

Create SHA/MD5 hashes.

JWT Debugger

Decode and inspect JSON Web Tokens locally.

SQL Formatter

Format and beautify SQL.

HTML to JSX

Convert HTML attributes to JSX props.


Last updated on