There’s currently no direct way to make multiple text-strokes on a text element using traditional CSS methods. So I recently discovered a CSS trick to easily make multiple outlines on a text element using the CSS text-stroke
property.
In this article, we will take a look at how we can make multiple text strokes on a text element using the CSS text-stroke
property.
Text Outline Example
Notice how we have two outlines on the text with a dark blue and light red color scheme. In this article, we will learn how to create multiple text outlines using plain CSS.
Steps to Create Two Outlines in CSS
1. Create container and text element
We would need to set the scene and stage for our text display. The first step is to create a container to house our elements and two paragraph elements with the same text. Do keep that in mind, we will know the reason in the later steps
<section class="outline-container">
<!-- first text -->
<p class="element">
<span>
Peas
</span>
</p>
<!-- second text -->
<p class="element">
<span>
Peas
</span>
</p>
</section>
Notice how the text (Peas) is enclosed in a span
tag. The reason is that we want to achieve a good z-index
stacking context for what we’re about to accomplish. Oh! And I added some styles to center the text in the middle. :)
2. Set paragraph elements to absolute
We need to set the paragraph elements absolute to the outline-container
class. The reason is simple, we want to make sure both paragraph elements overlap to create multiple outlines of the same text.
Right now, you can’t see any noticeable difference and that’s because we haven’t added any text outline to the texts using the CSS text-stroke
property and we haven’t set the z-index
of the second paragraph element yet.
3. Set text-stroke
of paragraph elements
Now, we set the text-stroke
of the first paragraph element and its z-index
property to:
.element:nth-child(1){
z-index: 2;
text-stroke: .5rem #9E0903;
}
.element:nth-child(2){
z-index: 1;
text-stroke: 1.5rem white;
}
Notice how the first two text outlines are visibly showing. One with a dark red color, and the other that is stacked behind - a white color.
Setting the elements this way guarantees us having two outlines in our text. But, what if we want more? Is that it? or did I just click-bait you into reading my article until now? (Maybe, but no). Let’s quickly look at how to make multiple outlines on a text below!
Making Multiple Text Outlines
A simple way to add multiple text outlines to a text is through a method I’d like to call text-stroke
stacking. text-stroke
stacking is simply multiple text strokes stacked on top of one another using mainly the text-stroke
CSS property and the CSS z-index
property.
With this stacking technique, you can make multiple outlines in your text. You can even make more with just 1 text element using the :after
and :before
pseudo-classes. This allows us to make up to three (3) text outlines on one text making the stacking process easier and more productive.
To show how this works, let’s include a style index variable on each element, ordering them from largest value to smallest value on both the paragraph element and its span element:
<section class="outline-container">
<!-- first text -->
<p class="element" style="--index: 2;">
<span style="--index: 2;">
Peas
</span>
</p>
<!-- second text -->
<p class="element" style="--index: 1;">
<span style="--index: 1;">
Peas
</span>
</p>
</section>
Now, this is the interesting part. We need to create a separate :before
and :after
pseudo-element for each paragraph element. We do this by setting each :before
and :after
pseudo-element of the paragraph to have a reduced z-index
by 1 and its content
property to the text:
.element:before, .element:after{
content: 'Peas';
}
.element:nth-child(1):before, .element:nth-child(2):before{
z-index: calc(var(--index) - 1);
}
.element:nth-child(1):after, .element:nth-child(2):after{
z-index: calc(var(--index) - 2);
}
Notice how we have 2 duplicates of the first letter. Don’t worry, it’s all according to plan. Here’s a quick breakdown.
The first ‘Peas’ text represents the first :before
pseudo-element set on all the paragraphs with the .element
class. It copies the styles of the .element
class and sets it separately; creating 1 copy of the paragraph texts. Remember, the first paragraph has a dark red text outline, and the second has a white text outline. So those two are on the left, already stacked. The same goes for the ::after
pseudo-element on the right.
So in total, each paragraph element allows up to 3 text outlines with this technique.
Breaking it Down
Let’s delete the second paragraph element to make our example easier to depict and understand.
Notice how the :before
remains with the same color and text stroke as its originating element, and how it’s not stacked behind the first ‘Peas’ text. That’s because it inherited those properties from its originating element, and its position was not set explicitly. Let’s fix it by changing its color and setting its CSS position
property to absolute
.
We want the color to be different from what’s already there and should be noticeable. I’m feeling very creative right now. So we use a dark red text outline color on it. 👍🏾
Now, that we have that covered. We need to set the text stroke attribute of the ::before
pseudo-element at least 1 pixel bigger than its originating element or more to make the difference noticeable.
Merging the Three Elements
We now have a text with a white stroke and a dark red stroke color for just one paragraph element. To add one more, we repeat the process shown in the ::before
pseudo-element for the ::after
pseudo-element. Only making the stroke width bigger than the ones set on ::before
pseudo-element and its originating element
Looks good right? We are not done however, remember, we deleted one paragraph element to explain things better. Let’s add it back and edit it to present our final result!
Final Result
To add 3 more text outlines, we created the second element the same way we created the first. The only difference is the CSS --index
for this second paragraph element will be lower, and the text stroke width will be bigger than its predecessor.
codepen.io/sunkanmii-the-styleful/embed/LYq..
And that’s it! We have now created multiple text outlines for our text! Congratulations on reaching this far! :D
If you want to have x amount of text outlines, your calculation for the amount of paragraph elements to create would be (x/3) paragraph elements and whenever you get a remainder, you round it up. e.g
x = 5 text outlines
Amount of paragraph elements to create (p) = 5 / 3 = 1.67
Ans = 2
2 paragraph elements are to be created
If you want more you can always create as much as you like as there’s no limit to what you can do with CSS nowadays. If you can imagine it, it’s most likely implementable!
Summary
In this article, we learned how to create multiple text outlines using a personal trick I call, text-stroke
stacking. text-stroke
stacking is a way to create multiple text outlines with mainly the CSS text-stroke
property and the CSS z-index
on the paragraph element.
Let me know in the comments below your thoughts, honest opinions, criticisms, and various additions.
Thank you for reading and I hope you have a great day ahead!
References
Adding Stroke to Web Text - Chris Coyier