Text Decoration CSS Generator - Online Underline & Strike

text-decoration creates underlines that are glyph-aware — they can skip character descenders (like the tails on g, j, p, q, y) via text-decoration-skip-ink. border-bottom is simpler: it draws a solid line beneath the entire element, ignoring glyph shapes. Use text-decoration for typographic underlines and border-bottom for layout dividers or when you need consistent lines regardless of text content.

text-decoration-skip-ink: auto (default) makes underlines automatically break around the descending parts of letters like g, j, p, q, and y — improving readability. Setting it to none forces a continuous line that cuts through descenders. This is especially noticeable in words like "playing" or "jungle." Try toggling it in the tool above with the preview text!

Yes! The native text-decoration-color property does not support gradients. However, you can simulate a gradient underline using background-image: linear-gradient(...) combined with background-size and background-position. Switch to the Gradient Underline mode in this tool to generate the CSS code instantly.

Both properties are well-supported in all modern browsers: Chrome 87+, Firefox 70+, Safari 12.1+, and Edge 87+. They are part of the CSS Text Decoration Module Level 4 specification. For older browsers (like Internet Explorer), these properties are ignored, and the browser falls back to default underline rendering.

Use: text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: #ef4444;. This mimics the familiar spelling/grammar error indicator. Click the "Spelling Error" preset above to see it in action!

The shorthand follows this order: text-decoration: <line> <style> <color> <thickness>;
Example: text-decoration: underline wavy red 3px;
Note that text-underline-offset and text-decoration-skip-ink are not included in the shorthand and must be set separately.

text-underline-offset adjusts the distance of the underline from the text (in px, em, etc.). text-underline-position: under (supported in Chrome/Firefox) forces the underline below the text's descenders entirely, which is useful for improving readability with fonts that have long descenders or when skip-ink: none is used.

Absolutely! You can combine underline, overline, and line-through in the text-decoration-line property. For example: text-decoration-line: underline overline; creates lines both above and below the text. The style, color, and thickness apply to all selected lines uniformly.

The exact rendering of dotted and dashed styles can vary slightly between browser engines (Blink, Gecko, WebKit). Thickness and spacing of dots/dashes may differ. For pixel-perfect control, consider using a border-bottom approach or the gradient simulation method with repeating backgrounds.