CSS Underline Generator

How to use

1. 1Pick a preset to start from a known good look, or leave the defaults and tune from there.
2. 2Choose the line (underline, overline, line-through, or both) and the style (solid, double, dotted, dashed, or wavy).
3. 3Set the color with the swatch or hex field, then pick a thickness (auto, from the font, or a custom pixel value) and an underline offset (auto or pixel).
4. 4Pick a skip-ink mode if you want the line to draw through descenders. Set the preview text, font, size, weight, color, and background to see the result in context.
5. 5Copy the CSS rule block, the text-decoration shorthand, the React style object, or the Tailwind class chain from the output panels on the right.

About this tool

CSS Underline Generator builds the modern CSS text-decoration declaration from a small set of editable controls and renders the live preview using the exact value the tool will copy. The generator covers every property from CSS Text Decoration Module Level 4: text-decoration-line (underline, overline, line-through, or both lines at once), text-decoration-style (solid, double, dotted, dashed, or wavy), text-decoration-color as any hex value, text-decoration-thickness (auto, from-font, or a custom pixel value from 1 to 16), text-underline-offset (auto or a custom pixel value from 0 to 24), and text-decoration-skip-ink (auto, none, or all) which controls whether the underline cuts through the descenders of letters like g, j, p, q, and y. Nine presets cover the everyday cases: a classic blue link, a thick offset emphasis line, a red wavy spell-check style, a soft dotted footnote, a dashed annotation, a double editorial score, a strikethrough for prices, a heavy highlighter marker, and a neon overline for dark UI. The live preview lets you choose the text content, pick a sans, serif, mono, or display font stack, set the size from 16 to 96 pixels, choose a weight from 300 to 800, set the text color, and switch the background between light, dark, and a checker so you can confirm the line reads in the contexts you actually ship. Four copy-ready outputs are produced. The CSS rule block targets a customisable selector (default .underlined) and pairs the text-decoration shorthand with the thickness, offset, and skip-ink longhands that the shorthand cannot express. The shorthand value is also available on its own for cases where you want to drop it inline. The React style object uses camelCased keys (textDecoration, textDecorationThickness, textUnderlineOffset, textDecorationSkipInk) so it pastes directly into a style prop. The Tailwind class chain uses first-class utilities where they exist (underline, overline, line-through, decoration-wavy, decoration-double, decoration-from-font, decoration-2, decoration-4, decoration-8, underline-offset-4) and falls back to arbitrary values (decoration-[#2563eb], underline-offset-[6px], [text-decoration-skip-ink:none]) for custom colors, off-scale pixel values, and skip-ink modes Tailwind does not ship a utility for. Useful for styling links the brand wants to feel distinctive, highlighting prices with a clean strikethrough, marking errors with a wavy red line, drawing attention with a thick offset accent under a heading, or anywhere the default browser underline does not match the design. Everything runs in your browser; nothing is uploaded.

Free to use. Works in your browser. No signup, no login.