How do you do Text Overlap, without individual Spans?

[simona6]

https://codingartistweb.com/2021/11/overlap-text-effect-with-html-and-css/

This is not an advert, I Want to know if I can create this effect, but without many many Spans down the page.
So I can create a slogan, and apply this effect to it.

Is that possible??

[Barand]

Try using a shadowed font (such as Google's "Rubik Doodle Shadow) and set the element's letter-spacing attribute to a negative value

[Barand]

Again, with svg we can add the text shadow and letter spacing

<div style='background-color: black; text-align: center;'>
    <svg width='380' height='80' viewBox='0 0 380 80'>
        <defs>
        <style type='text/css'>
            .olap {
                font-family: "arial black";
                font-size: 60pt;
                letter-spacing: -15px;
                fill: #fff; 
                text-shadow: -0.08em 0.03em 0.12em rgba(0, 0, 0, 0.7);
            }
        </style>
        </defs>
        <text class='olap' x='190' y='70' text-anchor='middle' >OVERLAP</text>
    </svg>
</div>

[simona6]

So you can't do that if it's a H1 tag, since it is in a Text tag?