How To Add Text Outline with CSS (r)

Share the news on

In this piece we explore how to style the text's outline by using CSS and look at how it can be used in conjunction with the different options available to you.

Understanding Web Texts

Web Text can be described as text that appears on web pages. Fonts are a crucial element in displaying text on the web. These fonts are essentially vector-based graphics, which means pixels do not restrict their ability to be displayed at various sizes while maintaining the clarity and sharpness of their images.

The most fascinating thing about the vector graphics that are fonts is the capability to draw strokes or lines around characters. Similar to how you create outlines around the shape of a character in vector programs such as Adobe Illustrator, CSS provides the ability to produce similar results in web fonts.

2 Methods To Add Text Outline With CSS

In the case of adding the outline look to your text with CSS There are two ways you can use. Let's explore and see the negatives of these techniques and how to use these techniques.

1. Utilizing the Text-Strike Property

Text-stroke text-stroke is a CSS property that can be used to make an outline of the text. You can specify the outline's size and the color. This feature is supported only by browsers that use WebKit, and for you to use it, you have to include the webkit- prefix.

As an example, let's add stroke to an h1 head text--"Welcome To ":

Welcome to

This is the way that text-stroke property will be used. "text-stroke" property is used using the webkit prefix:

h1 
 -webkit-text-stroke-width: 3px;
 -webkit-text-stroke-color: black;
 

-webkit-text-stroke-width and -webkit-text-stroke-color specify the stroke's width and color, respectively. It sets the width in the range of 3px as well as the the color to black.

These two properties may be combined with the shorthand property webkit-text stroke that simultaneously defines stroke width and color as well as the stroke's width.

h1 
 -webkit-text-stroke: 3px black;
 

The same output.

Support For Text-Strike Property

According to Caniuse, there is no support for this "text-stroke property on Internet Explorer. Internet Explorer browser.

If you are using your text-stroke property to set the text's outline and the user is using of an browser that's not compatible the text might not be displayed if the color matches the background color.

To fix this, you can use the -webkit-text-fill-color property to set a color for the text and set a fallback color with the color property:

h1 
 color: black;
 -webkit-text-fill-color: white; /* Will override color (regardless of order) */
 -webkit-text-stroke: 3px black;
 

When a browser does not allow text-strokes, and a browser does not support the stroke-text property, it uses the color specified by the property color property.

Another option will be to verify that your browser supports the -webkit-text-stroke property prior to adding the style.

@supports (-webkit-text-stroke: 3px black) 
 h1 
 -webkit-text-fill-color: white;
 -webkit-text-stroke: 3px black;
 
 

2. By using the text-shadow Property

If you're not looking to deal with support variations, you can use this text-shadow property that has the ability to work with all modern versions of most popular browsers.

For the text-shadow property, we'll apply four shadows each to the top right middle, left top, the bottom left and the bottom left.

h1 
 color: #fff;
 text-shadow:
 3px 3px 0 #000,
 -3px 3px 0 #000,
 -3px -3px 0 #000,
 3px -3px 0 #000;
 

In this instance the shadows are used to create a text outline effect. Each shadow is 3 pixels offset from the text, and its color is set to dark black ( #000). The result is the same as those created by the previous method.

When we apply shadows to all 4 corners you can create a clear outline. You are free to alter the pixel offsets and shadow colors or text colors to suit your specific design preferences.

This technique gives you an added advantage as you can adjust the vertical and horizontal shadows according to what suits the type of text. Also, you can include a blur radius

h1 
 color: #fff;
 text-shadow:
 3px 3px 2px #000,
 -3px 3px 2px #000,
 -3px -3px 0 #000,
 3px -3px 0 #000;
 

One limitation of using text shadows is that you might encounter a discontinuous stroke effect when the shadow length exceeds 1 pixels (you'll notice this if you examine it against text-stroke method). text-stroke method).

Text-stroke Properties that combine text-shadow and text-stroke properties

You can combine both properties to achieve a visually stunning effect that combines the perfect outline of text along with subtle blurs as well as additional effects provided through this text-shadow property. The combination offers an incredibly flexible and custom method of enhancing the text's look.

h1 
 -webkit-text-stroke: 1px black;
 color: white;
 text-shadow:
 3px 3px 0 #000,
 -1px -1px 0 #000, 
 1px -1px 0 #000,
 -1px 1px 0 #000,
 1px 1px 0 #000;
 

It is also possible to do away from having to apply separate shadows to every corner and apply a general shadow by using one line:

#heading-1
 color: white;
 -webkit-text-stroke: 1px #F8F8F8;
 text-shadow: 0px 1px 4px #23430C;
 
 
 #heading-2
 color: white;
 -webkit-text-stroke: 1px #F8F8F8;
 text-shadow: 0px 2px 4px red;
 
 
 #heading-3
 color: #333;
 -webkit-text-stroke: 1px #282828;
 text-shadow: 0px 4px 4px #282828;
 

Summary

Both the text-stroke as well as the text-shadow properties are useful for adding outlines to the text. Your choice of which one to use is contingent on compatibility with your browser, the desired effects, and also the level of control you require for your design.

  Share your experience! Have you used different methods not mentioned in this article? Tell us about it in the comments.