CSS Text Shadow Overrides the Background Linear Gradient
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 i.e. 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>