Ready to move beyond the boring, default browser underline? Our Text Decoration CSS Generator lets you visually design unique and stylish lines for your text. Customize the line, style, color, and thickness in real-time and instantly grab the CSS code to make your content stand out.
The quick brown fox jumps over the lazy dog.
About the Text Decoration CSS Generator
Adding styled lines to your text—whether for clickable links, striking out discounted prices, or emphasizing page titles—can elevate your web design. Default browser underlines often feel outdated and rigid. Modern CSS allows you to customize line style, color, thickness, and positioning completely separate from your text font styling.
Our Text Decoration CSS Generator lets you visually build custom text underlines, overlines, and line-through effects in real time. Customize your properties visual-first and grab clean, modern CSS code ready for production.
How to Use This Tool
It’s super easy to create your custom text decoration style. Here’s how:
- Type Your Text: You can use the default “The quick brown fox…” text or type your own into the preview box to see how it looks.
- Select Line: Choose the type of decoration you want from the ‘Line’ dropdown (e.g.,
underline,overline,line-through). - Choose Style: Select the line’s appearance from the ‘Style’ dropdown (e.g.,
solid,dotted,dashed,wavy). - Pick a Color: Click the color box to open the color picker and select the exact color for your line.
- Adjust Thickness: Use the ‘Thickness’ slider to set how thick you want the line to be, measured in pixels.
- Copy the CSS: Once you’re happy with your design, click the “Copy CSS” button to copy the generated code. The tool provides both the convenient shorthand property and the individual properties for more granular control.
Use Cases Of Text Decoration CSS Generator
This generator is useful for a wide range of design needs:
- Creating unique hover effects for navigation links.
- Styling headings to match your brand’s aesthetic.
- Designing visually interesting blockquotes or pull quotes.
- Showing “sale” or “discounted” prices with a custom strikethrough.
- Adding emphasis to important words or phrases within a paragraph.
- Styling links in blog posts to make them more noticeable.
Understanding CSS Text Decoration Properties
The CSS text-decoration shorthand property combines multiple underlying sub-properties into one clean code block.
CSS
/* Shorthand Syntax */
text-decoration: underline wavy #ff3b30 3px;
Here is how each sub-property functions under the hood:
1. text-decoration-line
Determines where the decorative line is drawn relative to the text:
underline: Places a line below the text baseline.overline: Draws a line above the top of the text.line-through: Renders a line through the middle (strikethrough).none: Removes all visual line decorations.
2. text-decoration-style
Defines the visual appearance and stroke design of the line:
solid: A single continuous line (default browser style).dotted: A row of rounded dots.dashed: A line made of short dash segments.wavy: A repeating squiggly line pattern ideal for highlights or error states.
3. text-decoration-color
Controls the color of the decoration line independently from the text color. You can apply hex codes, RGB, HSL, or named colors.
4. text-decoration-thickness
Sets the stroke width of the line using precise pixel values (px), percentages, or keywords like auto or from-font.
CSS Text Decoration Quick Reference
| Property Value | Common Web Use Case | Browser Support |
solid | Clean UI navigation links, subtle content emphasis | 100% Modern Browsers |
dotted | Tooltip indicators, inline dictionary definitions | 100% Modern Browsers |
dashed | Draft notes, pending tasks, edit modes | 100% Modern Browsers |
wavy | Spellchecking alerts, playful accents, creative links | 100% Modern Browsers |
UX Best Practices for Text Lines
Using text decorations effectively improves visual hierarchy and readability:
- Keep Links Recognizable: Users expect underlined text to be interactive. Avoid placing standard static underlines on unclickable text to prevent confusion.
- E-Commerce Strikethroughs: Combine a red
line-throughon old pricing with high-contrast text for new pricing to increase sales conversions. - Layer Visual Typography: Pair custom colored underlines with subtle drop shadows generated in our Text Shadow CSS Generator to make page headings pop.
- Combine Gradient Effects: Use distinct line colors alongside vibrant gradient text created with our CSS Text Gradient Generator for modern landing pages.
FAQs
What is the text-decoration property in CSS?
text-decoration is a CSS shorthand property that sets the appearance of decorative lines on text. It combines text-decoration-line, text-decoration-style, text-decoration-color, and text-decoration-thickness into a single declaration.
Why does the tool generate two sets of CSS code?
The tool provides both the shorthand version (text-decoration: ...) and the individual, or longhand, properties (text-decoration-line: ..., etc.). The shorthand is more concise, but the individual properties can be useful if you only want to override one specific aspect of the decoration (like just the color) in a different CSS rule.
Are these custom text decorations supported by all web browsers?
The core properties like text-decoration-line, style, and color have excellent support across all modern browsers. The text-decoration-thickness property is also widely supported, but it’s always a good idea to test on your target browsers.
Can I create a text decoration with no line?
Yes. If you want to remove an underline from an element like a link, you can use the CSS rule text-decoration: none;.
What is the standard shorthand syntax for CSS text decoration?
The shorthand property syntax follows this structure: text-decoration: [line] [style] [color] [thickness];. For example: text-decoration: underline solid #0070f3 2px;.
How do I change the underline color without changing text color?
Set the text-decoration-color property separately from the color property. This lets you display black text with a vibrant red or blue underline.
How can I remove default underlines from HTML links?
Target your anchor tags in CSS and apply text-decoration: none;. This removes all browser default link underlines.
Can I display multiple decoration lines on the same text?
Yes. You can combine multiple values in text-decoration-line separated by spaces, such as text-decoration-line: underline overline;.
What is the difference between text-decoration and border-bottom?
text-decoration attaches directly to the typography baseline and wraps seamlessly across multi-line text paragraphs. border-bottom draws a box border below the bounding box of the entire HTML element.
Are wavy text decoration lines supported on mobile browsers?
Yes. All modern desktop and mobile browsers (iOS Safari, Android Chrome, Samsung Internet) support text-decoration-style: wavy.
How do I adjust the spacing between text and its underline?
Use the CSS property text-underline-offset. For instance, setting text-underline-offset: 4px; moves the line 4 pixels down from the text baseline.
Does CSS text decoration affect web accessibility?
No. Text decorations are presentational styles. Screen readers process the underlying plain text content regardless of line styles or colors.
Why is my custom text-decoration-thickness not working?
Ensure you have declared a valid unit like px or %. If you omit units (writing 2 instead of 2px), the browser ignores the thickness rule.
Can I animate the thickness or color of a text underline on hover?
Yes. You can transition properties like text-decoration-color and text-underline-offset smoothly using standard CSS transition rules.