I have a simple test based on this codepen: https://codepen.io/davidlillo/pen/wZRagx
@import url('https://fonts.googleapis.com/css?family=Pirata+One|Rubik:900');
body {
justify-content: center;
align-items: center;
min-height: 25vh;
background-color: #141E30;
background: linear-gradient(to right, #24243e, #141E30, #0f0c29);
}
#backinblack h1 {
text-transform: Uppercase;
margin-bottom: .5em;
font-family: 'Rubik', sans-serif;
font-size: 6rem;
color: #E4E5E6;
}
#backinblack h1 {
position: relative;
background: linear-gradient(to right, #24243e, #141E30, #0f0c29);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#backinblack h1:before,
#backinblack h1:after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
}
#backinblack h1:before {
z-index: -1;
text-shadow: -0.001em -0.001em 1px rgba(255, 255, 255, .15)
}
#backinblack h1:after {
z-index: -2;
text-shadow: 10px 10px 10px rgba(0, 0, 0, .5), 20px 20px 20px rgba(0, 0, 0, .4), 30px 30px 30px rgba(0, 0, 0, .1);
mix-blend-mode: multiply;
}<div id="backinblack"><h1 data-text="test">test</h1></div>The text shadow works fine when the CSS is like this:
body {
justify-content: center;
align-items: center;
min-height: 25vh;
background-color: #141E30;
background: linear-gradient(to right, #24243e, #141E30, #0f0c29);
}
However, if I change it to have the CSS like this:
#backinblack {
justify-content: center;
align-items: center;
min-height: 25vh;
background-color: #141E30;
background: linear-gradient(to right, #24243e, #141E30, #0f0c29);
}
And leave the HTML like this:
<div id="backinblack">
<h1 data-text="test">test</h1>
</div>
Then the text-shadow does not appear:
@import url('https://fonts.googleapis.com/css?family=Pirata+One|Rubik:900');
#backinblack {
justify-content: center;
align-items: center;
min-height: 25vh;
background-color: #141E30;
background: linear-gradient(to right, #24243e, #141E30, #0f0c29);
}
#backinblack h1 {
text-transform: Uppercase;
margin-bottom: .5em;
font-family: 'Rubik', sans-serif;
font-size: 6rem;
color: #E4E5E6;
}
#backinblack h1 {
position: relative;
background: linear-gradient(to right, #24243e, #141E30, #0f0c29);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#backinblack h1:before,
#backinblack h1:after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
}
#backinblack h1:before {
z-index: -1;
text-shadow: -0.001em -0.001em 1px rgba(255, 255, 255, .15)
}
#backinblack h1:after {
z-index: -2;
text-shadow: 10px 10px 10px rgba(0, 0, 0, .5), 20px 20px 20px rgba(0, 0, 0, .4), 30px 30px 30px rgba(0, 0, 0, .1);
mix-blend-mode: multiply;
}<div id="backinblack"><h1 data-text="test">test</h1></div>I wondered why that is the case?