CSS Text Decoration Generator
Generate CSS text-decoration — underline, overline or strikethrough with a solid, dotted, dashed, double or wavy line, custom color, thickness and offset — with a live preview, then copy the CSS and HTML.
Input
Only used for the preview and HTML snippet.
Distance between the text and its underline (text-underline-offset).
Output
Your decorated text will appear here.
More ways to use this tool
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-text-decoration-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{}'Swap in your own key from your account. The tool's fields are the body — no wrapper.
Ask an AI agent
Use the IOTools `css-text-decoration-generator` tool (CSS Text Decoration Generator) on this input:
YOUR_INPUT_HEREPaste this at any agent connected to the IOTools MCP server, then add your input.
Embed widget
<iframe
src="https://iotools.cloud/embed/css-text-decoration-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS Text Decoration Generator — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Drop this into your own page — free, no key required, just a link back.
| Cost per API/MCP call | From 5 credits |
|---|---|
| Need more credits? | View pricing |
Also available with
Guides
The CSS text-decoration property draws lines on text: underlines, overlines and strikethroughs. Modern CSS lets you style that line too, with a solid, double, dotted, dashed or wavy pattern, any color, and a custom thickness. This generator shows the result on your own text and gives you CSS to copy.
How to use it
- Type some sample text. It only drives the preview and the HTML snippet.
- Pick the lines you want: underline, overline, line-through, or a combination.
- Choose a style, color and thickness. Wavy red lines are the familiar "spell check" look; dotted and dashed work well for links and abbreviations.
- Tune the underline offset and skip-ink.
text-underline-offsetmoves the underline away from the text, andtext-decoration-skip-ink: automakes the line skip around descenders such as g, j and y. - Copy the output: the one-line declaration, a complete CSS rule, and a matching HTML snippet.
The shorthand explained
text-decoration is a shorthand for text-decoration-line, text-decoration-style, text-decoration-color and text-decoration-thickness. Offset and skip-ink are separate properties, so the generated rule includes them on their own lines.
Accessibility tips
- Don't rely on color alone to mark links. Keep an underline, or use another cue.
- A strikethrough on text that must stay readable (prices, changes) should keep enough contrast with the background.
For shadows and glows on text, see the CSS Text Shadow Generator. For gradient-filled letters, try the Gradient Text CSS Generator.
Privacy
Everything runs in your browser. Your text and settings are never uploaded.