Box shadow not working in mozilla - html

Question

This is working fine with chrome,but box shadow not taking in Mozilla even after adding the browser prefix
h1 {
color: #fff;
font-size: 50px;
background: #101010;
-webkit-box-shadow: 15px 0 #0e0303, -15px 0 #1b0f0f;
-ms-box-shadow: 15px 0 #0e0303, -15px 0 #1b0f0f;
-moz-box-shadow: 15px 0 #0e0303, -15px 0 #1b0f0f;
box-shadow: 15px 0 #0e0303, -15px 0 #1b0f0f;
padding: 0;
line-height: 1.4!important;
display: inline!important;
text-align: justify;
letter-spacing: 4px;
}
<h1>THE <br> SILK <br> ROAD</h1>

Answer 1

Try with box-decoration-break and padding CSS properties. It would be almost helpful to make this effect in a single sentence break.
h1 {
color: #fff;
font-size: 50px;
background: #101010;
line-height: 1.4 !important;
display: inline !important;
text-align: justify;
letter-spacing: 4px;
padding: 0 15px 0 10px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
<h1>THE <br> SILK <br> ROAD</h1>

Answer 2

try this -
-moz-box-shadow: 0 0 20px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.4);
box-shadow: 0 0 20px rgba(0,0,0,0.4);
instead of -
-webkit-box-shadow: 15px 0 #0e0303, -15px 0 pink;
-moz-box-shadow: 15px 0 #0e0303, -15px 0 pink;
box-shadow: 15px 0 #0e0303, -15px 0 pink;

Answer 3

You don't need to use box-shadow to have the background color on the text only.
Instead, you can try this:
.background-on-text{
background-color: #1b0f0f;
color: #fff;
line-height: 1.4;
padding: 0 15px;
letter-spacing: 4px;
font-size: 50px;
}
<h1><span class="background-on-text">THE <br> SILK <br> ROAD</span></h1>
I hope it helps.

Answer 4

You are using black color everywhere so you cannot see the effect of the box-shadow. Try this code, it will run in mozilla as well as in the chrome browser.
h1 {
color: #fff;
font-size: 50px;
background: red;
-webkit-box-shadow: 15px 0 #0e0303, -15px 0 pink;
-ms-box-shadow: 15px 0 #0e0303, -15px 0 pink;
-moz-box-shadow: 15px 0 #0e0303, -15px 0 pink;
box-shadow: 15px 0 #0e0303, -15px 0 pink;
padding: 0;
line-height: 1.4!important;
display: inline!important;
text-align: justify;
letter-spacing: 4px;
}
<h1>THE <br> SILK <br> ROAD</h1>