βοΈ Underline Text Generator
Your text becomes copy-paste underline code.
Live preview
How to Use This Generator
Type your text, pick an underline style (solid, double, dotted, dashed, wavy), choose a color, thickness, and offset, then hit Generate Underline Code. The preview shows the styled result live; the details give three copy-paste snippets: plain HTML with the tag, a CSS rule with your exact styling, and an inline-style span for dropping into existing pages. Copy whichever fits your project.
Type the text you want underlined.
Pick style, color, thickness, and offset. Watch the preview.
Hit Generate Underline Code and copy the snippet you need.
Paste into your HTML or stylesheet. Test in your target browsers.
The Method: text-decoration Shorthand
Modern CSS packs the whole underline into the text-decoration shorthand: line, style, color, thickness in one declaration, plus text-decoration-offset for the gap. The worked example: solid style, #1a56db color, 2px thickness, 3px offset produces an underline that sits cleanly below descenders in brand blue. The tag alone gives the browser default (solid, current text color, auto thickness); the CSS route gives the designed look. The generator writes all three forms so you can choose per context: semantic HTML for documents, classes for stylesheets, inline styles for one-offs.
Worked Example
Text "Sale ends Friday", wavy style, red (#dc2626), 2px, 4px offset. The generator outputs three snippets: an HTML version using the <u> tag, a CSS class (.ul) with the full text-decoration rule, and an inline-styled span for one-off use. Paste the CSS into a stylesheet and apply class="ul", or drop the span directly into page HTML. The preview above renders the same styling live so you can approve the look before copying.
Style Guide: When Underlines Work
Wavy red underlines read as spellcheck errors to most users; use them only for that joke or that meaning. Double underlines suit formal document headings and legal-style emphasis. Dotted underlines conventionally mark abbreviations with tooltips (the pattern). On the web, remember the link convention: underlined non-links annoy. In print CSS and PDFs, underlines are free of that baggage and work as pure emphasis.
Browser Notes
text-decoration-thickness and offset are supported in all modern browsers; very old ones fall back to default underlines gracefully, which is an acceptable degradation. The shorthand with four values needs a modern browser to parse fully; the generator's CSS also works if you split it into longhand properties. For email HTML, underlines are safer than most CSS: tags render everywhere, while fancy thickness may not. Test in your actual targets; email clients are the wild west.
Underlines in Email HTML
Email clients are where underline styling gets humbling. Gmail, Outlook, and Apple Mail each parse CSS differently, and fancy text-decoration rules are among the first casualties. The tag, ancient and unglamorous, renders in practically every inbox on earth, which is why email developers still reach for it. If your newsletter needs a styled underline, test it in the actual clients your readers use: Litmus and Email on Acid exist for exactly this, but even a quick send to your own Gmail and Outlook covers most of the risk. Inline styles beat embedded stylesheets in email, so the generator's inline span is the right snippet for newsletters. One more email-specific trap: some clients auto-link dates, addresses, and phone numbers, adding their own blue underlines you did not ask for. You can override those with span wrappers and !important color rules, though results vary. When in doubt in email, keep underlines simple and save the wavy colored designs for the web version.
Accessibility and Underline Readability
Underlines carry meaning for readers who cannot rely on color alone. Roughly 1 in 12 men has some color vision deficiency, so a link styled only in blue looks like plain text to them; the underline is what marks it as clickable. This is why design systems that remove link underlines for aesthetics usually add them back on hover or focus at minimum. The Web Content Accessibility Guidelines treat color-alone signaling as a failure, and underlines are the classic fix. Thickness matters here too: a 1px underline at small sizes can shimmer or vanish on low-resolution screens, while 2px stays legible. Offset helps readers with dyslexia and low vision by keeping the line clear of descenders, so letters like g, p, and y stay recognizable. If you style links, test the design in grayscale: every link should still be identifiable. The generator's thickness and offset controls let you tune this deliberately instead of accepting browser defaults.
When underlines must survive copying between applications (Word to web, Docs to email), prefer the simple <u> tag over styled CSS: rich formatting is the first thing paste operations strip. For design systems, define one link-underline style (thickness, offset, color) as a token and reuse it everywhere; consistency here reads as polish. Test the final look at actual text sizes, not zoomed in.
A Second Worked Example: The Error State
Form validation errors are the best use of the wavy underline. Text "Email is required", wavy style, red (#dc2626), 2px thickness, 2px offset. The CSS: text-decoration: underline wavy #dc2626 2px; text-decoration-offset: 2px. It reads instantly as "fix this" without any icon, and it degrades gracefully: browsers that do not support wavy render a solid red underline, which still reads as an error.
Pair it with an icon or message text for screen readers, since underlines alone carry no semantic meaning to assistive tech. The visual says error; the aria-describedby text says what the error is. Style and semantics are separate jobs, and the underline only does the first.
Underlines vs. Borders: Picking the Tool
CSS offers two ways to draw a line under text, and they behave differently. text-decoration underlines every line of wrapped text automatically and skips descenders by default in modern browsers. border-bottom draws one line under the whole box, which sits below the lowest descender and can be positioned with padding. For multi-line links, text-decoration wins. For headings where you want a short accent line or generous spacing, border-bottom with padding-bottom gives control the text-decoration offset cannot.
The modern best practice: text-decoration for link underlines, with thickness and offset tuned, and border-bottom for decorative rules. Never use both on the same element; the doubled lines look like a rendering bug. And skip-ink, the default that keeps underlines clear of descenders, is why modern underlines look cleaner than the old solid bars: leave it on unless you have a specific reason.
Common Underline Mistakes
First: underlining non-link text on the web. Decades of convention say underlined text is clickable; underlining plain text breaks that promise and confuses readers. Use bold or color for emphasis instead. Second: the tag for styling. In HTML5, means "unarticulated annotation," not "make this underlined." It is fine for its semantic uses, like marking misspelled words, but reach for CSS when you just want the look.
Third: forgetting email clients. Many email clients mangle text-decoration shorthand; for email HTML, use simple inline underlines and test in the actual clients your audience uses. Fourth: low-contrast underline colors that vanish for colorblind users. The underline should be visible independent of its color. Fifth: underlines on every link in a paragraph of links. In dense link lists, underlines add noise; use them on hover or for the key links, and let the rest breathe.
Frequently Asked Questions
How do I underline text in HTML?
Wrap it in <u> tags or use CSS text-decoration: underline. The <u> tag is the quick semantic-free option; CSS gives control over color, thickness, and offset. Enter your text above and the generator outputs both, ready to paste. For documents rather than web pages, Ctrl+U remains faster than any generator.
How do I change underline color in CSS?
Use text-decoration-color: red alongside text-decoration: underline, or the shorthand text-decoration: underline red 2px. The generator's style options produce the exact CSS for your chosen color, thickness, and offset. Note the color property alone does not recolor underlines. The shorthand form sets all three at once and is what the generator outputs for you.
How do I make a thicker underline?
With text-decoration-thickness: 2px (or 0.15em for scalable thickness). The generator lets you pick thickness in pixels and writes the rule. Thicker underlines suit headings; body text usually wants 1px so the line does not overpower the words. Print stylesheets can use thicker underlines freely since the link-confusion issue does not apply on paper.
Can you underline text in markdown?
Standard markdown has no underline syntax. Options: embed raw <u>text</u> HTML (works in most renderers), or use a link-styled span. The generator includes the HTML snippet plus a CSS class alternative for markdown documents that allow HTML. Some flavors like GitHub markdown strip raw HTML, so test your underline there before relying on it.
How do I offset an underline from the text?
With text-decoration-offset: 3px, which drops the line below the descenders for a cleaner look. The generator includes an offset picker. Larger offsets suit big headings; small offsets keep body text tight. Older browsers may need the -webkit- prefix. Very large offsets can collide with the next line's text, so keep display headings generously line-spaced.
Should I underline text on websites?
Sparingly. Web users read underlines as links, so underlining non-link text creates misclick frustration. Reserve underlines for actual links, or use bold and color for emphasis instead. The generator exists for the cases where underlining is genuinely wanted: print styles, documents, headings.
What is the difference between <u> and <ins>?
<u> renders an underline with no semantic meaning; <ins> means inserted text (like tracked changes) and renders underlined by default. Use <ins> for document revisions with a datetime attribute; use <u> or CSS for pure styling. The generator outputs <u> for the plain case.
How do I underline in Google Docs or Word?
Select the text and press Ctrl+U (Cmd+U on Mac), or click the U button in the toolbar. Both offer double, dotted, and wavy underline styles in the format menus. This generator is for web code; for documents, the keyboard shortcut is fastest.