Text Decoration Generator
Build CSS text-decoration values interactively. Customize the line type (underline, overline, line-through), style (solid, double, dotted, dashed, wavy), color, thickness (1-10px), and underline offset (0-20px). See your changes live on custom preview text, then copy the production-ready CSS with one click. Eight presets included - completely free, no signup required.
Presets
/* Text Decoration */ text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: #6366f1; text-decoration-thickness: 2px; text-underline-offset: auto; /* Shorthand */ text-decoration: underline solid #6366f1 2px;
Why Use Our Text Decoration Generator?
Instant Live Preview
See your text decoration changes in real-time as you adjust style, color, thickness, and offset. Our text decoration generator updates the preview instantly - no button to press. Type your own preview text to see exactly how the decoration looks with your content.
Full CSS Property Support
Control every CSS text-decoration property: line (underline, overline, line-through), style (solid, double, dotted, dashed, wavy), color, thickness (1-10px), and underline offset (0-20px). The generator outputs both individual properties and the shorthand notation.
100% Private - No Server Uploads
All text decoration CSS generation happens locally in your browser. Your text and design choices never leave your device and are never sent to any server - completely safe for client projects and proprietary content.
Free & No Signup Required
Generate unlimited text decoration CSS with no signup, no subscription, and no usage caps. Our text decoration generator is completely free forever with no limits on how many times you use it.
Common Use Cases for Text Decoration Generator
Link & Anchor Styling
Design custom link underlines that match your brand identity. Use the text decoration generator to create unique underline styles with custom colors, wavy effects, or double lines that stand out from the default browser link styling while maintaining accessibility.
Website Typography Design
Add visual emphasis to headings and body text with controlled text decorations. Custom overlines for section titles, line-through for strikethrough effects on sale prices, and decorative underlines for pull quotes - all with precise thickness and offset control.
Editorial & Long-Form Content
Style rich text elements in articles, blog posts, and documentation. Use the text decoration generator to create consistent underline styles for emphasis, overline accents for sidebars, and line-through for editorial corrections.
Email Newsletter Design
Create custom text decorations for email newsletters that render consistently across email clients. Test different style and color combinations to ensure your links and emphasized text look great in Outlook, Gmail, and Apple Mail.
Design Handoff & Prototyping
Define text decoration specifications during the design phase and export the exact CSS for developers. No more guessing what "wavy underline" means - our text decoration generator produces pixel-perfect CSS that matches the designer intent.
CSS Development & Testing
Quickly generate and test text-decoration CSS values before adding them to your stylesheet. The generator outputs both individual CSS properties and the shorthand notation, giving you flexibility in how you implement the styles in your project.
Understanding CSS Text Decoration
What is CSS Text Decoration?
CSS text decoration adds visual lines to text: underlines below, overlines above, and line-through across the middle. The text-decoration shorthand property controls the line type, style, color, and thickness - all in one declaration. Modern CSS also supports text-underline-offset and text-decoration-thickness for precise control. Our text decoration generator makes it easy to explore these properties visually and get production-ready CSS.
How Our Text Decoration Generator Works
- Choose a preset or start customizing: Browse 8 presets covering common text decoration styles (classic underline, double underline, wavy, dashed overline, dotted line-through, thick offset, thin wavy). Click any preset to instantly apply it.
- Customize every property: Select the decoration line (underline, overline, line-through, or none), pick from 5 styles (solid, double, dotted, dashed, wavy), choose any color via the color picker or presets, adjust thickness with a slider (1-10px), and set the underline offset (0-20px or auto). Type your own preview text and adjust font size and weight to match your design context.
- Copy the CSS:Click “Copy CSS” to copy the complete CSS block to your clipboard. It includes both individual property declarations and the shorthand notation - ready to paste into your stylesheet.
Text Decoration Properties Explained
- text-decoration-line: Sets which line is drawn. Use
underlinefor links and emphasis,overlinefor decorative headings,line-throughfor strikethrough effects (sale prices, completed tasks), ornoneto remove decoration. - text-decoration-style: Controls the visual style of the line. Choose
solidfor standard lines,doublefor two parallel lines,dottedordashedfor subtle effects, orwavyfor playful or error-indicating decorations. - text-decoration-color: Sets the color independently from the text color. This allows you to use a brand accent color for underlines while keeping body text in a neutral color -a common design pattern that our text decoration generator makes easy.
- text-decoration-thickness: Controls the line width (1-10px). Thicker lines are more visible and can serve as a design element, while thin lines are subtle and unobtrusive. Use the slider in our text decoration generator to find the perfect balance.
- text-underline-offset: Controls the distance between the text baseline and the underline. A larger offset creates more breathing room between text and line, improving readability for thick underlines. Set to
autofor the browser default.
Browser Support & Compatibility
The text-decoration shorthand is supported in all browsers. Individual properties like text-decoration-thickness and text-underline-offset are supported in Chrome 87+, Firefox 70+, Safari 12.1+, and Edge 87+. The wavy style has broad support across all modern browsers. For maximum compatibility, our text decoration generator provides both the individual property syntax and the shorthand equivalent.
Related Tools
Color Picker & Converter
Visual color picker with HEX, RGB, HSL, HSV, CMYK, HWB, and CIE LAB conversion. Bidirectional inputs, WCAG contrast checker, CSS variable output - free online color picker converter.
Color Name Finder
Enter any HEX or RGB color and instantly find the closest named color from 300+ CSS, X11, and Pantone color names. Search by name or browse the full database - free online color name finder.
Color Contrast Checker
Calculate WCAG 2.1 contrast ratio and check AA/AAA compliance for normal text, large text, and UI components - live preview, HEX and RGB input. Free online color contrast checker.
Color Difference Calculator (ΔE 2000)
Calculate the perceptual color difference (ΔE 2000 / CIEDE2000) between any two colors - enter HEX or RGB values and get the Delta-E score with a visual comparison and CIE L*a*b* breakdown. Free online color difference calculator.
Frequently Asked Questions About Text Decoration Generator
A text decoration generator is a visual tool that builds CSS text-decoration values from configurable properties like line type, style, color, thickness, and offset. Our text decoration generator lets you preview changes instantly, use presets for quick starts, and copy the production-ready CSS with one click - all without writing any code manually.
The text decoration generator supports all modern text-decoration properties: text-decoration-line (underline, overline, line-through, none), text-decoration-style (solid, double, dotted, dashed, wavy), text-decoration-color (any hex color), text-decoration-thickness (1-10px), and text-underline-offset (0-20px or auto). It outputs both individual CSS properties and the shorthand notation.
Yes. Use Tailwind arbitrary values for the generated CSS: class="underline decoration-wavy decoration-indigo-500 decoration-2 underline-offset-4". The underline utility maps to text-decoration-line, decoration-{style} for style, decoration-{color} for color, decoration-{size} for thickness, and underline-offset-{size} for offset. Copy the values from our generator output.
The color property sets the text color, while text-decoration-color sets only the decoration line color independently. This allows design patterns where the underline is a different color from the text - for example, black text with a blue underline. The text decoration generator lets you set both separately for maximum design flexibility.
text-underline-offset sets the distance between the text baseline and the underline. A value of 0px places the underline right at the baseline, while larger values push it further down. Setting it to "auto" lets the browser choose the optimal offset based on the font size and thickness. This is particularly useful for thick underlines or when using double lines that need more space.
Yes. Our text decoration generator is 100% free with no signup required, no premium features, and no usage limits. Generate unlimited text decoration CSS without any restrictions or hidden costs. All processing happens locally in your browser.
The text-decoration shorthand combines all properties into one declaration: text-decoration: underline wavy #6366f1 2px. Individual properties give you more control and are easier to override in specific contexts. The text decoration generator provides both formats so you can use whichever works best for your project.
Yes. Wavy underlines are commonly used to indicate spelling errors (like in word processors) and form validation errors. Use a red wavy underline (style: wavy, color: #dc2626) for error states. This creates a familiar and intuitive visual cue that users recognize from spell-checkers and text editors.
The text-decoration shorthand is supported in all browsers. Individual properties like text-decoration-thickness and text-underline-offset require Chrome 87+, Firefox 70+, Safari 12.1+, and Edge 87+. The wavy style is supported across all modern browsers. For older browser support, our generator provides the shorthand as a fallback that degrades gracefully.