I’m trying to implement a inset shadow of a text with CSS but I’ve only reached a solution with setting a special attribute to HTML tag.

I’ve searched for different solution on net, but they have a problem with overflowing light shadow Here’s example

Can I somehow get the element’s inner text value and set the content property with this value? Or maybe there is different solution?

There is my solution with setting additional data-text attribute:

<h1 class="inner-text-shadow" data-text="Inset shadow">Inset shadow</h1>

.inner-text-shadow {
    font-size: 10rem;
    font-family: "Lucida Console", "Courier New", monospace;

    color: hsla(0, 0%, 13%, 1);
    
    position: relative;
}

.inner-text-shadow::after {
    content: attr(data-text);

    width: 100%;
    height: 100%;

    position: absolute;
    top: 5px;
    left: 5px;

    color: #FFF;
    text-shadow: 0px 0px 5px #FFF;
    mix-blend-mode: overlay;
}

Result

So with this solution I’ve got a wanted result, but I dont like the idea of manualy duplicating the element’s text to attribute.