Dotted Underline CSS Generator

Will Read

A useful technique for creating dashed / dotted underlines using css gradients for when you need precise control over the size / spacing of the dashes.

Settings

Color

Dash Width (4px)

Space Width (2px)

Thickness (2px)

Padding (3px)

Preview

This is some text with an underline

CSS

.underline {
  background: linear-gradient(90deg, #000 0, #000 4px, transparent 4px, transparent 100%) bottom left / 6px 2px repeat-x;
  display: inline-block;
  padding-bottom: 3px;
}