Why does background color only works in developer tools (toggle device toolbar)

I'm trying to make a linear gradient background for the top of a carousel in my theme.
This is the CSS code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

 .carousel-item::before {
    content: "";
    position: absolute;
    top: 0;
    height: 500px;
    width: 100%;
    background: linear-gradient(to bottom, black 0%, rgba(145, 232, 66, 0) 100%);
    background: -webkit-linear-gradient(to bottom, black 0%, rgba(145, 232, 66, 0) 100%);
    background: -moz-linear-gradient(to bottom, black 0%, rgba(145, 232, 66, 0) 100%);
    background: -ms-linear-gradient(to bottom, black 0%, rgba(145, 232, 66, 0) 100%);
    background: -o-linear-gradient(to bottom, black 0%, rgba(145, 232, 66, 0) 100%);
  }

<!-- language: lang-html -->

 <div class="carousel-item"></div>

<!-- end snippet -->

The style works well on firefox and edge. but doesn't work on chrome and opera, as you see

And there is one strange thing: when I use "toggle device toolbar" in developer tools, it works!

Where is the problem?!

Your code is correct but few thing missing in your code. You haven't close Curly brackets }. You should add left or right position (i.e.: left : 0; or right: 0;). That code should look like this.

.carousel-item{
position: relative;
}
/* CSS3 syntax */
.carousel-item::before{
background-color: transparent;
background-image: linear-gradient(to bottom, black 0%, rgba(145, 232, 66, 0) 100%);
background-image: -webkit-linear-gradient(to bottom, black 0%, rgba(145, 232, 66, 0) 100%);
background-image: -moz-linear-gradient(to bottom, black 0%, rgba(145, 232, 66, 0) 100%);
background-image: -ms-linear-gradient(to bottom, black 0%, rgba(145, 232, 66, 0) 100%);
background-image: -o-linear-gradient(to bottom, black 0%, rgba(145, 232, 66, 0) 100%);
content: "";
height: 500px;/* Or 100% */
left: 0; /* It's missing */
position: absolute;
top: 0;
width: 100%;
}
/* If you face any issue in CSS3 syntax you can use CSS2 syntax
to support more older browser and all latest browser */
.carousel-item:before{
background-color: transparent;
background-image: linear-gradient(to bottom, black 0%, rgba(145, 232, 66, 0) 100%);
background-image: -webkit-linear-gradient(to bottom, black 0%, rgba(145, 232, 66, 0) 100%);
background-image: -moz-linear-gradient(to bottom, black 0%, rgba(145, 232, 66, 0) 100%);
background-image: -ms-linear-gradient(to bottom, black 0%, rgba(145, 232, 66, 0) 100%);
background-image: -o-linear-gradient(to bottom, black 0%, rgba(145, 232, 66, 0) 100%);
content: "";
height: 500px;/* Or 100% */
left: 0; /* It's missing */
position: absolute;
top: 0;
width: 100%;
}

>If your CSS isn't update properly do your browser hard refresh or clean your browser cache.