Container background affect gradient border

I implemented a simple box with gradient border, but changing the container's background made the gradient border disappeared.

What is weird is that if the container's background has less than 100 opacity, or even transaparent or unset, the gradient border is showing.

May this be a browser bug or can someone explain why? Thanks thanks.

Source: https://codepen.io/shshaw/pen/MqMZGR

.container {
     width: 100%;
     height: 100%;
}
 .container-1 {
     /* background: transaprent; */
}
 .container-2 {
     background: #161616;
}
 .gradient-box {
     display: flex;
     align-items: center;
     width: 90%;
     margin: auto;
     max-width: 22em;
     position: relative;
     padding: 2rem;
     box-sizing: border-box;
     color: #fff;
     background: #000;
     background-clip: padding-box;
    /* !importanté */
     border: solid 5px transparent;
    /* !importanté */
     border-radius: 1em;
}
 .gradient-box:before {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: -1;
     margin: -5px;
    /* !importanté */
     border-radius: inherit;
    /* !importanté */
     background: linear-gradient(to right, red, orange);
}
 html {
     height: 100%;
     background: #171717;
     display: flex;
}
 body {
     margin: auto;
}

<div class="container container-1">
  <div class="gradient-box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut.</p>
  </div>
</div>

<div class="container container-2">
  <div class="gradient-box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut.</p>
  </div>
</div>

Solution

The issue lies in how elements are render currently this flow is followed

gradient-box:before › container-2 › gradient-box

So when ever you change color of container-2 it overlaps your gradient-box:before.

To fix this issue we need to rearrange to this flow container-2 › gradient-box:before › gradient-box with the help of z-index.

Add position: relative & z-index: -2 to container-2 and your issue will get fixed. Below is working example. This is codepen link to playaround.

.container {
     width: 100%;
     height: 100%;
}
 .container-1 {
     // background: transparent;
}
 .container-2 {
     background: white;
       z-index: -2;
    position: relative;
}
 .gradient-box {
     display: flex;
     align-items: center;
     width: 90%;
     margin: auto;
     max-width: 22em;
     position: relative;
     padding: 2rem;
     box-sizing: border-box;
     color: #fff;
     background: #000;
     background-clip: padding-box;
    /* !importanté */
     border: solid 5px transparent;
    /* !importanté */
     border-radius: 1em;
}
 .gradient-box:before {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: -1;
     margin: -5px;
    /* !importanté */
     border-radius: inherit;
    /* !importanté */
     background: linear-gradient(to right, red, orange);
}
 html {
     height: 100%;
     background: #171717;
     display: flex;
}
 body {
     margin: auto;
}

<div class="container container-1">
  <div class="gradient-box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut.</p>
  </div>
</div>

<div class="container container-2">
  <div class="gradient-box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut.</p>
  </div>
</div>