CSS Text Shadow Overrides the Background Linear Gradient

Question

I am working on a web app which will allow the user to generate a logo, and have discovered an issue in certain scenarios. When the text color is actually a gradient, I am using a technique to render this gradient where the color is set to transparent and the background is set to the gradient, as the color cannot accept the gradient value directly.

However, when I also use the text-shadow property, such as to create a 3D shadow effect, the shadow colors block / override the background color. The CSS below is taken from an example where this occurs. The text shadow has different shades of gray, and the background itself has that linear gradient of a blue to orange color, but the end result does not appear to have those colors. Is there a different combination of CSS properties, or perhaps a way to provide the gradient to the color property instead of background, that will prevent this issue?

#logo {
    color: transparent;
    background: linear-gradient(#3294cd, #a85c34);
    background-clip: text;
    -webkit-background-clip: text;
    font-style: italic;
    font-weight: bold;
    font-family: Aladin;
    filter:  brightness(100%) contrast(140%) saturate(140%);
    text-shadow: 0px 0px 0 #bbb, -1.4285714285714284px 0.5714285714285714px 0 #999, -2.8571428571428568px 1.1428571428571428px 0 #888, -4.285714285714286px 1.7142857142857142px 0 #777, -5.7142857142857135px 2.2857142857142856px 0 #666, -7.142857142857143px 2.857142857142857px 0 #555, -8.571428571428571px 3.4285714285714284px 0 #444, -10px 4px 0 #333;
}

The output of the CSS above is shown below:

Answer 1

The way text-shadow seems to work is by creating a 'copy' of the text in the relevant color and the relevant distance/position from the actual text. So if your text is basically transparent you just see the shadow.

The 'trick' which allows you to get a background cutout by the text doesn't stop the background still being, well, a background ie it is 'beneath' everything else, including the shadow.

The only workaround I can think of is to have two copies of the text. Put the first into an absolutely positioned element behind the second. The first will have the shadow, the second will have the 'cutout' background.

 #dummyLogo { position: absolute; color: transparent; font-style: italic; font-weight: bold; font-family: Aladin; filter: brightness(100%) contrast(140%) saturate(140%); text-shadow: 0px 0px 0 #bbb, -1.4285714285714284px 0.5714285714285714px 0 #999, -2.8571428571428568px 1.1428571428571428px 0 #888, -4.285714285714286px 1.7142857142857142px 0 #777, -5.7142857142857135px 2.2857142857142856px 0 #666, -7.142857142857143px 2.857142857142857px 0 #555, -8.571428571428571px 3.4285714285714284px 0 #444, -10px 4px 0 #333; font-size: 72px; z-index: -1; } #logo { color: transparent; background: linear-gradient(#3294cd, #a85c34); background-clip: text; -webkit-background-clip: text; font-style: italic; font-weight: bold; font-family: Aladin; filter: brightness(100%) contrast(140%) saturate(140%); font-size: 72px; }

 <div id="dummyLogo">HELLO</div> <div id="logo">HELLO</div>