CSS Underline and Text Decoration Generator
Choose which lines to draw, their style, colour, thickness and distance from the text, and see the result on your own wording.
About CSS Underline and Text Decoration Generator
Underlines are no longer limited to a thin black line. The text-decoration property can draw solid, double, dotted, dashed or wavy lines in any colour and thickness, and text-underline-offset moves the line away from the letters. Together they make links and headings look deliberate instead of default.
Type your own wording, tick which lines you want, then choose the style, colour, thickness and distance. You can also decide whether the line skips over the tails of letters such as g and y. The preview uses a large heavy size so the details are easy to judge, and the CSS is a short rule you can add to a link or heading.
How to use CSS Underline and Text Decoration Generator
- Type some sample text.
- Choose the lines, the style and the colour.
- Set the thickness and the distance, or leave them on automatic.
- Copy the CSS.
Common uses
- Making links look distinctive and still clear
- Styling a highlighted heading with a thick wavy underline
- Showing deleted text with a coloured strike-through
- Learning the newer text decoration properties
Frequently asked questions
What does skip-ink do?
By default the line breaks around the tails of letters such as g, j, p and y so they stay clear. Setting it to none draws an unbroken line straight through them.
Why leave thickness and offset on automatic?
The browser picks values to suit the font, which is often the best choice. Set your own only when you want a thicker line or more space.
Should links be underlined?
It helps. Colour alone is not enough for people who cannot tell colours apart, so keep an underline or use another clear marker such as a bold weight.
Is wavy a good choice?
Browsers use wavy lines for spelling errors, so many people read them as mistakes. Use them for decoration with care, and not on text that is not an error.