NotchTools

ESC

(╥﹏╥)

No results found

CSS Underline Generator

Underlining Big Text is cool right?

but it is also cool in small text, like this one. Yo, I'm underlined! See! You know what, I'm Iron-Man

CSS
.underline {
     text-decoration-line: underline;
     text-decoration-style: solid;
     text-decoration-color: #78C00C;
     text-decoration-thickness: 8px;
     text-underline-offset: 11px;
  }
Tailwind CSS class
underline decoration-["#78C00C"] decoration-solid decoration-[8px]underline-offset-[11px]
​​​​ ​ ​ ​ ​ ​ ​​
​​​​ ​ ​ ​ ​ ​ ​​
​​​​ ​ ​ ​ ​ ​ ​​
​​​​ ​ ​ ​ ​ ​ ​​
​​​​ ​ ​ ​ ​ ​ ​​
px
px

Also check out ✨

Check out some other tools that you might find useful

CSS Minifier

Minify your CSS code and make the file size smaller that helps to load your website faster.

CSS Beautifier

Beautify your CSS code and make it more readable and well-structured. Easy to beautify your CSS code.

HEX to RGB Converter

Convert HEX color code to RGB color code online. This tool allows you to convert HEX color code to RGB color code.

RGB to HEX Converter

Convert RGB color code to HEX color code online. This tool allows you to convert RGB color code to HEX color code.

PX to REM Converter

Convert Pixels to REM online. Customize the base value for the conversion and get the desired output

REM to PX Converter

Convert REM to Pixels online easily. Adjust the base value to customize your conversions for precise results.

CSS Glassmorphism Generator

Create a glassmorphism effect with pure CSS or Tailwind CSS. Customize the background, blur, and opacity, then grab the CSS code with vendor prefixes.

CSS Text Glow Generator

Generate CSS text glow, Tailwind CSS support. Customize the glow color, radius, and strength.

CSS Glow Generator

Generate CSS glow, Tailwind CSS support. Customize the glow color, radius, and strength.

CSS Text Shadow Generator

Generate CSS text shadow, Tailwind CSS support. Customize the shadow color, blur, spread, and offset.

CSS Box Shadow Generator

Generate CSS box shadow, Tailwind CSS support. Customize the shadow color, blur, spread, and offset.

If you found this tool helpful, consider buying us a coffee ☕️

What is CSS underline?

CSS underline is a style applied to text to draw a line under the text. It is used to emphasize text and highlight important text in the content.

How to use CSS Underline Generator?

CSS Underline Generator is a simple tool to generate CSS code and Tailwind Class for underlining text. You can easily customize the underline style, color, thickness, and offset using the options provided in the tool.

Here are the feature of CSS Underline Generator:

Underline style

You can select underline style from the dropdown. There are 5 underline styles available: solid, dashed, dotted, double, and wavy.

Underline color

You can select underline color from the color picker. You can choose any color for the underline.

Underline thickness

You can select underline thickness from the range slider. You can choose the thickness of the underline.

Auto thickness is also available. You can select auto thickness to set the thickness of the underline automatically.

Thickness from font size option is also available. You can select this and the thickness of the underline will be the same as the font.

Underline offset

You can select underline offset from the range slider. You can choose the offset of the underline.

Offset means the distance between the text and the underline. You can set the offset of the underline in positive or negative values. Positive values will move the underline below the text and negative values will move the underline above the text.

Auto offset is also available. You can select auto offset to set the offset of the underline automatically.

About CSS Underline

The text-decoration property in CSS is used to underline text. This property allow us to underline text with different styles like solid, dashed, dotted, double, and wavy.

Underline is used to emphasize text. It is used to highlight important text in the content. It is also used to show links in the content.

In CSS, you can underline text using the text-decoration property. You can set the text-decoration property to underline to underline text.

Here is an example of underlining text using the text-decoration

<style>
  .underline {
    text-decoration-line: underline;
    text-decoration-color: blue;
    text-decoration-style: solid;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
  }
</style>

In the above example, we have used the text-decoration-line property to underline text. We have set the text-decoration-color to blue, text-decoration-style to solid, text-decoration-thickness to 2px, and text-underline-offset to 5px.

FAQs

How to underline text in CSS?

You can underline text in CSS using the text-decoration property. You can set the text-decoration property to underline to underline text.

Does this tool generate tailwindcss (tailwind class) code for underlining text?

Yes, this tool generates tailwindcss code for underlining text. You can copy the tailwindcss code and use it in your project.