Tools / Text Design Effects

Text Decoration Designer

Tune underline, overline, or strike-through style and copy its CSS.

01

Online Tool

Emphasize with intention

.decorated-text {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #b87862;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
02

Tool Working Principle

The preview combines text-decoration-line, text-decoration-style, text-decoration-color, text-decoration-thickness, and text-underline-offset. The offset affects underlines; browsers may render other line types differently.

03

Step-by-Step Usage Tutorial

  1. 1Enter a short sample phrase.
  2. 2Choose the decoration line, style, color, thickness, and offset.
  3. 3Review the preview and copy the CSS block.
04

Frequently Asked Questions

Do I need an account to use Text Decoration Designer?+

No. Every tool on TypeTempo runs fully in the browser with no account, email, or API key.

Is my input text stored anywhere?+

Tool calculations use the text in your browser, and the app does not send that input to the TypeTempo application server. A preview may still request font files or other assets from an external provider; those requests do not include the text you entered.

Can I use the output commercially?+

You can use generated text and CSS in personal or commercial work. If a result depends on a named typeface or third-party asset, check that family's or asset's licence before using or distributing its files.

Which browsers are supported?+

The tools are designed for modern desktop and mobile browsers. Font rendering and individual CSS or Unicode features can vary, so check the specific result in the browsers and devices you support.

Does underline offset affect overlines and strike-through?+

No. text-underline-offset applies to underlines. The other decoration lines use browser-defined positions.

05

Related Tools