CSS Underline Generator
Generate styled text underlines with custom colour, thickness, offset and style such as wavy or gradient using modern CSS.
Last reviewed by the Radiatus Cloud team
Generate styled text underlines with custom colour, thickness and style.
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
Style text underlines with CSS
Modern CSS gives fine control over text underlines, well beyond the default thin line. This generator produces an underline style from your chosen colour, thickness, offset from the text and line style, which can be solid, wavy, dotted or dashed. These properties let you create tasteful, legible underlines that complement your typography rather than cutting through descenders.
Apply the generated class to links, headings or emphasised words for a distinctive underline treatment.
Better-looking underlines
The underline offset property pushes the line away from the text so it clears the descenders of letters like g and y, a small change that greatly improves readability. A coloured, slightly thicker underline can serve as a brand accent on links, and the wavy style is useful for spelling-style highlights. These properties are widely supported in modern browsers.
Keep the underline colour and thickness balanced with the text size so it accents rather than overwhelms. All generation happens locally in your browser.
Notes on the generated code
Because the css underline generator runs entirely in your browser, you can experiment with every option and watch the generated code update instantly, with nothing uploaded and no account required. The output is clean, standards-based CSS that works in any project without external libraries or a build step, so you can paste it straight into your stylesheet and refine it further by hand whenever you need to.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
What does the underline offset do?
It pushes the underline away from the text so it clears the descenders of letters, improving readability.
Can I make a coloured underline?
Yes. The text-decoration-color property sets the underline colour independently of the text colour for a brand accent.
What underline styles are available?
Solid, wavy, dotted and dashed, set with the text-decoration-style property for different visual effects.
Are these properties widely supported?
Yes. Underline colour, thickness, offset and style are supported across modern browsers for reliable styled underlines.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Choose the colour, thickness, offset and style, then copy the CSS.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.