Over the past few years, a bunch of cool things were added to CSS to make text pop and look awesome. One such cool thing is the ability to display just the text outline without relying on any hacks. Take a look at the following example:
Did you know that your fingerprint is unique? Of course you did!
Notice that the Of course you did! text doesn't have a fill color. Its appearance is entirely made up of just an outline. Doing something like this used to be impossible. That's not the case any more, and we'll look at how to create this effect in this tutorial.
Onwards!
The way you create this outline effect is by relying on the -webkit-text-stroke property that takes a width and color as its values:
.outline {
-webkit-text-stroke: 2px cyan;
}
The width value represents how thick the outline is going to be. The color value defines the color of the outline. Fairly straightforward. The longhand version of this property is:
.outline {
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: cyan;
}
One thing to notice is that our text-stroke properties have the webkit prefix on them. That seems a bit weird, but that is the only version that all browsers support. Even non-webkit browsers like Firefox and Edge support this property in all its webkit...ness. That might change one day, but it hasn't yet.
In the previous section, we looked at the -webkit-text-stroke property and how to use it. In this section, we'll drive it all home by using it as part of an example...the same example we started this tutorial off with!
To get started, create a new HTML document and add the following markup:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Text Outline</title>
<style>
body {
background-color: #0F1020;
padding: 100px;
}
#textContainer p {
font-family: sans-serif;
font-size: 64px;
font-weight: 100;
color: #E6E8E6;
margin: 0;
}
</style>
</head>
<body>
<div id="textContainer">
<p>Did you know that your
fingerprint is unique?
<span class="outline">Of course you did!</span></p>
</div>
</body>
</html>
Once you have added all of this markup, preview what you have in your browser. You should see something that looks as follows:
Take a look at the markup that is responsible for the text that we see:
<div id="textContainer"> <p>Did you know that your fingerprint is unique? <span class="outline">Of course you did!</span></p> </div>
What we want to do is take the text inside our span element and display it using the outline effect we've been talking about. We want our outline to be 1px wide and appear in a lime greenish color. To make all that happen, add the following style rule towards the bottom of your style block (below the existing style rules):
#textContainer .outline {
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #AFFC41;
}
After you've added this style rule, preview the latest change in your browser. You should see the outline appear:
If you want to display only the text outline, all you have to do is set our text's CSS color property to transparent:
#textContainer .outline {
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #AFFC41;
color: transparent;
}
After doing that, our Of course you did! text will display using only an outline!
Browser support for the text-stroke property is very VERY good, but you may want to display a fallback for those few users who will not see the outline effect. In those cases, we just want to display the text in a solid color instead. The way we can do that is by combining the color and -webkit-fill-color properties instead:
#textContainer .outline {
color: #E6E8E6;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #AFFC41;
}
In this case, our text will appear with a solid color for old properties (via the color property). If the special -webkit-text properties are supported, the -webkit-text-fill-color property will override the color property and display the outline with a transparent fill color. Everybody wins!
The -webkit-text-stroke property makes creating an outline out of our text so much easier. In the past, if we wanted to do this, we had to rely on actual images, hacking drop shadows, using a special outline-only font, or just giving up and crying in the corner. We no longer have to do any of that!
Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!
