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-indexstacking 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

• MDN -webkit-text-stroke property