Adding a cool outline effect to your text is quite simple with just a few lines of CSS.

Previously, you needed to use hacks, such as adding several box-shadow properties, to achieve such a result.

But with modern CSS to add an outline effect you’ll need to use only three CSS properties -webkit-text-fill-color, -webkit-text-stroke-width and -webkit-text-stroke-color.

.outline-text {
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #262626;
}

Result:

Outline Text

These properties are pretty self-explanatory:

• -webkit-text-fill-color - adds a fill color for the text
• -webkit-text-stroke-color - specifies the outline color of the text
• -webkit-text-stroke-width - specifies the outline width of the text

Hover effect

They also work well with CSS transitions, so you can apply one on hover effect.

  .outline-text {
    -webkit-text-fill-color: #fff;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #262626;

    transition: -webkit-text-stroke-color .2s ease-in-out;
  }

  .outline-text:hover {
    -webkit-text-stroke-color: #f00;
  }

Result:

Outline Text with Hover Effect

Browser support

These three properties are fully supported by all modern browsers.

Data on support for the -webkit-text-fill-color feature across the major browsers

Data on support for the -webkit-text-stroke-color feature across the major browsers

Data on support for the -webkit-text-stroke-width feature across the major browsers