Free Online CSS Text Underline Generator Tool

Generate CSS text underline styles online instantly with this free CSS Text Underline Generator. Use the tool below to create custom underlines, underline colors, thickness, offsets, decoration styles and clean CSS code for links, headings and text elements.

CSS text underline settings

Create modern CSS underlines with text-decoration, offset, thickness, gradients and hover reveal effects.

Underline controls

Adjust thickness, offset, gradient size and hover timing.

Thickness 3px
Offset 6px
Hover duration 280ms
Font size 72px

Live preview

Preview the underline as a heading, link, paragraph, button or card title.

Modern underline

Generated CSS

Underline CSS value text-decoration: underline;

Saved underlines

Recent and favorite underline styles are saved locally in this browser.

Recent underlines

Favorite underlines

What is a CSS Text Underline Generator?

A CSS Text Underline Generator is an online tool that helps you create custom underline styles with CSS. Instead of writing text-decoration values manually, you can adjust underline color, thickness, offset, style and hover effects, preview the result and copy the generated CSS code.

CSS underlines are commonly used for links, navigation items, headings, call-to-action text, buttons, article content, highlighted words and interactive UI elements. A custom underline can make text feel more polished, readable and aligned with your design system.

This CSS Text Underline Generator runs directly in your browser, making it fast and simple to create underline CSS without installing software.

What can you use it for?

You can use this online underline generator to create custom link underlines, heading underlines, animated hover underlines, thick underlines, dotted underlines, dashed underlines, wavy underlines, colored underlines and modern text decoration effects.

For example, you may want a subtle underline for article links, a bold underline for headings, a colorful underline for brand text, a wavy underline for emphasis, or an animated underline that appears when a user hovers over a navigation link.

How to use the CSS Text Underline Generator

Step 1: Customize the underline

Use the controls to adjust the underline style, color, thickness, offset and text decoration options.

Step 2: Preview the underline style

Check the live preview to see how the underline looks on your text. Adjust the values until the underline matches your design.

Step 3: Copy the CSS code

Copy the generated underline CSS and paste it into your stylesheet, component, page builder, theme or frontend project.

CSS text underline options

This CSS Text Underline Generator can help with common underline styling tasks such as:

  • Generate CSS underline styles
  • Create custom text underlines
  • Create link underline CSS
  • Create colored underlines
  • Create thick underlines
  • Create thin underlines
  • Create dotted underlines
  • Create dashed underlines
  • Create wavy underlines
  • Adjust underline offset
  • Adjust underline thickness
  • Generate text-decoration CSS
  • Generate text-underline-offset CSS
  • Generate text-decoration-thickness CSS
  • Create hover underline effects
  • Create animated underline effects
  • Preview underline styles live
  • Generate clean CSS code
  • Copy underline CSS instantly
  • Use the tool without installing software

The final CSS output may depend on the values you choose, the font size, line height, text color, link styles and how the generated code is applied in your project.

What does text-decoration do in CSS?

The CSS text-decoration property controls decorative lines on text. It is most commonly used to create underlines, but it can also create overlines, line-through styles and different decoration effects.

For underline styling, modern CSS includes several useful properties:

  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-decoration-thickness
  • text-underline-offset

Together, these properties let you create custom underlines that look cleaner and more intentional than the browser default.

Basic CSS underline example

A simple custom underline can be created with text-decoration.

.link {
  text-decoration-line: underline;
  text-decoration-color: #2563eb;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

This creates a blue underline with custom thickness and spacing below the text.

CSS text-decoration shorthand

You can also use the text-decoration shorthand property.

.link {
  text-decoration: underline 2px solid #2563eb;
  text-underline-offset: 4px;
}

This shorthand can define the line, thickness, style and color in one declaration.

Common CSS underline examples

Simple underline

A simple underline uses the default underline style.

.link {
  text-decoration: underline;
}

This is useful for standard links and readable article content.

Colored underline

A colored underline can match your brand color or highlight style.

.link {
  text-decoration-line: underline;
  text-decoration-color: #ec4899;
}

This is useful for navigation links, headings, CTAs and highlighted text.

Thick underline

A thicker underline creates stronger emphasis.

.heading {
  text-decoration-line: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: 6px;
}

This works well for headings, section titles and featured text.

Dotted underline

A dotted underline can create a softer or more subtle text effect.

.link {
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

This can be useful for hints, definitions, tooltips or secondary links.

Dashed underline

A dashed underline creates a more visible decorative style.

.link {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}

This can be useful for creative links, notices or highlighted interactive text.

Wavy underline

A wavy underline adds a playful or editorial feel.

.highlight {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #f97316;
}

This can be used for emphasis, warnings, playful design details or creative typography.

Main CSS underline properties

text-decoration-line

The text-decoration-line property defines the type of decoration line.

text-decoration-line: underline;

Common values include underline, overline, line-through and none.

text-decoration-color

The text-decoration-color property controls the underline color.

text-decoration-color: #2563eb;

You can use hex, RGB, RGBA, HSL, HSLA or named colors.

text-decoration-style

The text-decoration-style property controls the visual style of the line.

text-decoration-style: solid;

Common values include solid, double, dotted, dashed and wavy.

text-decoration-thickness

The text-decoration-thickness property controls the underline thickness.

text-decoration-thickness: 2px;

This is useful when default browser underlines look too thin or too heavy.

text-underline-offset

The text-underline-offset property controls the distance between the text and the underline.

text-underline-offset: 4px;

Increasing the offset can make underlines look cleaner and easier to read.

Underline offset explained

The text-underline-offset property changes how far the underline sits from the text baseline.

A small offset keeps the underline close to the text.

text-underline-offset: 2px;

A larger offset creates more breathing room.

text-underline-offset: 6px;

This is especially useful for headings, large links, navigation items and decorative underline styles.

Text underline vs border-bottom

There are two common ways to create underline effects in CSS: text-decoration and border-bottom.

Text decoration underline

text-decoration is designed specifically for text lines.

.link {
  text-decoration: underline 2px solid #2563eb;
  text-underline-offset: 4px;
}

This is usually the best choice for normal text and links.

Border-bottom underline

border-bottom creates a line at the bottom of the element box.

.link {
  border-bottom: 2px solid #2563eb;
}

This can be useful for custom layouts, animated effects or when you need more control over the line width and position.

Animated underline hover effect

A common modern effect is an underline that expands on hover.

.link {
  position: relative;
  text-decoration: none;
}

.link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: #2563eb;
  transition: width 0.25s ease;
}

.link:hover::after {
  width: 100%;
}

This works well for navigation menus, CTA links, footer links and modern website interfaces.

Gradient underline example

You can create a gradient underline with a pseudo-element.

.link-gradient {
  position: relative;
  text-decoration: none;
}

.link-gradient::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #6366f1, #ec4899);
  border-radius: 999px;
}

This is useful for landing pages, hero sections, brand links and decorative headings.

Background underline effect

Another underline style uses a background gradient behind the text.

.highlight {
  background-image: linear-gradient(90deg, #facc15, #f97316);
  background-repeat: no-repeat;
  background-size: 100% 0.25em;
  background-position: 0 90%;
}

This creates a marker-style underline or highlight effect, often used in editorial design and landing page copy.

Underlines for links

Links should usually remain recognizable as interactive elements. Underlines are one of the clearest ways to show that text is clickable.

A clean custom link underline can improve the design while keeping the link easy to understand.

a {
  color: #2563eb;
  text-decoration-line: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

For accessibility, avoid removing underlines from important body links unless another clear visual cue is provided.

Underlines for headings

Underlines can also be used as decorative heading accents.

.section-title {
  text-decoration-line: underline;
  text-decoration-color: #ec4899;
  text-decoration-thickness: 5px;
  text-underline-offset: 8px;
}

This can help section titles stand out in landing pages, blogs, portfolios and marketing pages.

Underlines for navigation

Navigation links often use hover underlines to show interaction.

.nav-link {
  text-decoration: none;
}

.nav-link:hover {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

For a smoother effect, use a pseudo-element animation instead of changing only text-decoration.

Why use a CSS Text Underline Generator?

A visual CSS Text Underline Generator helps you create underline styles faster. Instead of guessing thickness, offset, color and style values, you can adjust the underline visually, preview the result and copy the CSS when it looks right.

This is useful for designers, developers, students, frontend builders, WordPress users, Elementor users and anyone creating custom typography or link styles.

It can also help you keep consistent underline styles across links, headings, navigation menus, buttons, CTAs and reusable UI components.

Text underline design tips

Keep links recognizable

Underlines help users identify links. Be careful when removing underlines from body text links.

Use enough contrast

Make sure the underline color is visible against the background and works with the text color.

Adjust underline offset

A small offset can look cramped. Increasing text-underline-offset often makes underlines feel cleaner.

Match thickness to font size

Large headings can use thicker underlines. Small body text usually works better with thinner underlines.

Use decorative effects intentionally

Wavy, dashed, gradient and animated underlines can look great, but they should not distract from readability.

Test on mobile

Underline spacing and thickness can look different on small screens, especially with large headings.

Use hover effects carefully

Hover effects are useful on desktop, but important information should not depend only on hover because touch devices do not work the same way.

CSS underline and accessibility

Underlines are important for accessibility because they help users identify links and interactive text. Color alone may not be enough to show that something is clickable.

For body text links, underlines are often helpful because they make links easier to scan. For navigation menus, buttons or large CTAs, other visual cues may also work, but focus states should remain clear for keyboard users.

When creating animated underlines, make sure the text remains readable and the focus state is visible.

Common underline use cases

For links

Create readable link underlines for blog posts, documentation, article content and resource pages.

For navigation

Create hover underlines, active menu underlines and animated navigation link effects.

For headings

Add decorative underlines to section titles, hero headings, feature titles and editorial layouts.

For CTAs

Create strong underline styles for call-to-action text links and promotional sections.

For highlighted words

Underline important words, phrases or keywords with a custom color or marker-style effect.

For design systems

Create reusable underline styles for links, headings, navigation states and interactive text.

Related tools

[fuo_related_tools limit="6" columns="3"]

Frequently Asked Questions

Is this CSS Text Underline Generator free?

Yes. This CSS Text Underline Generator is completely free to use.

No. You can generate CSS underline styles directly in your browser without installing software.

The main property is text-decoration-line: underline;, often combined with text-decoration-color, text-decoration-style, text-decoration-thickness and text-underline-offset.

Yes. You can use text-decoration-color to set a custom underline color.

Yes. You can use text-decoration-thickness to control how thick the underline appears.

Yes. You can use text-underline-offset to increase or decrease the space between the text and underline.

Yes. You can use text-decoration-style: dotted; or text-decoration-style: dashed;.

Yes. You can use text-decoration-style: wavy; for a wavy underline effect.

Yes. Animated underlines are commonly created with pseudo-elements such as ::after and CSS transitions.

Yes. Gradient underlines can be created with a pseudo-element and a CSS gradient background.

Yes. After creating your underline style, you can copy the generated CSS code and use it in your project.

Yes. You can copy the generated CSS and use it in WordPress, Elementor, custom CSS fields, blocks, themes or frontend projects.

Body text links are often easier to recognize when underlined. Navigation links and buttons may use other visual cues, but they should still be clearly interactive.

text-decoration creates a decoration line for text. border-bottom creates a border on the element box and can be useful for custom underline layouts or animations.

Explore more CSS tools

Need more CSS utilities? Explore our free design tools to create text shadows, buttons, gradients, border radius values, box shadows, animations, transforms, responsive layouts and modern UI effects faster.

Scroll al inicio