How To Add Text Outline With CSS

Posted on Latest In Blogs
Adding text outline with CSS can be achieved using a few different methods, each with its own advantages and trade-offs. Here are some common ways to create outlined text using CSS:

1. Using text-shadow

The most straightforward method is to use the text-shadow property. By creating multiple shadows, you can simulate an outline effect.

css
.outlined-text {
color: white; /* or any other text color */
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}

In this example, #000 is the color of the outline (black). The offsets -1px, 1px determine the direction of the shadow.

2. Using -webkit-text-stroke

Another method is to use the -webkit-text-stroke property, which is supported in WebKit-based browsers (like Chrome and Safari).

css
.outlined-text {
color: white; /* or any other text color */
-webkit-text-stroke: 1px black; /* stroke width and color */
}

3. Using SVG for More Complex Outlines

For more complex outlines or if you need broader browser support, you can use SVG. You can include an SVG directly in your HTML or as a background image.

html
<svg viewBox="0 0 100 20" xmlns="http://www.w3.org/2000/svg" class="outlined-text">
<text x="0" y="15" font-family="Arial" font-size="15" stroke="black" stroke-width="1" fill="white">Outlined Text</text>
</svg>

Or include it in CSS as a background image:

css
.outlined-text {
display: inline-block;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><text x="0" y="15" font-family="Arial" font-size="15" stroke="black" stroke-width="1" fill="white">Outlined Text</text></svg>') no-repeat;
width: 100px; /* Adjust based on your text */
height: 20px; /* Adjust based on your text */
}

4. Using Multiple Cloned Elements

This method involves duplicating the text element multiple times and positioning them around the original text to create an outline effect.

html
<div class="outlined-text">Outlined Text</div>
css
.outlined-text {
position: relative;
color: white;
font-size: 20px;
}
.outlined-text::before, .outlined-text::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.outlined-text::before {
color: black;
top: 1px;
left: 1px;
z-index: -2;
}
.outlined-text::after {
color: black;
top: -1px;
left: -1px;
z-index: -3;
}

In this example, the ::before and ::after pseudo-elements are used to create the outline effect by positioning cloned elements slightly offset from the original text.

Each of these methods has its use cases and limitations. The text-shadow method is simple and works across all modern browsers, while the -webkit-text-stroke is more precise but has limited browser support. SVG provides the most flexibility but is more complex to implement. Choose the method that best fits your needs and the browsers you need to support.