Carousel Bootstrap 4 - css

Question

background-image: linear-gradient(to top, black 0%, transparent 100%);
How to add this gradient to bootstrap 4 carousel?
I tried to put it in carousel-item and carousel-inner. No affect.
This is how looks my bs4 carousel
<div id="gallery" class="carousel slide" data-ride="carousel" style="margin-top: 6rem;">
<ol class="carousel-indicators">
<li data-target="#gallery" data-slide-to="0" class="active"></li>
<li data-target="#gallery" data-slide-to="1"></li>
<li data-target="#gallery" data-slide-to="2"></li>
<li data-target="#gallery" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/gallery1.jpg" class="d-block w-100 gallery-img" alt="ВИГВАМ">
<div class="carousel-caption">
<h5>item0</h5>
<p>desc</p>
</div>
</div>
<div class="carousel-item">
<img src="img/gallery8.jpg" class="d-block w-100 gallery-img" alt="item">
<div class="carousel-caption">
<h5>item1</h5>
<p>desc</p>
</div>
</div>
<div class="carousel-item">
<img src="img/gallery2.jpg" class="d-block w-100 gallery-img" alt="item">
<div class="carousel-caption">
<h5>item2</h5>
<p>desc</p>
</div>
</div>
<div class="carousel-item">
<img src="img/gallery3.jpg" class="d-block w-100 gallery-img" alt="item">
<div class="carousel-caption">
<h5>item3</h5>
<p>desc</p>
</div>
</div>
<a class="carousel-control-prev" href="#gallery" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">prev</span>
</a>
<a class="carousel-control-next" href="#gallery" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">next</span>
</a>
</div>
</div>

Answer 1

.carousel::after {
background-image: linear-gradient(to top, black 0%, transparent 100%);
bottom: 0;
content: "";
height: 100px;
left: 0;
position: absolute;
right: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div id="gallery" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#gallery" data-slide-to="0" class="active"></li>
<li data-target="#gallery" data-slide-to="1"></li>
<li data-target="#gallery" data-slide-to="2"></li>
<li data-target="#gallery" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.chancerides.com/wp-content/uploads/2017/03/cr_detail_36ft_carrousel.jpg" class="d-block w-100 gallery-img" alt="ВИГВАМ">
<div class="carousel-caption">
<h5>item0</h5>
<p>desc</p>
</div>
</div>
<div class="carousel-item">
<img src="https://www.chancerides.com/wp-content/uploads/2017/03/cr_detail_36ftdd_carrousel.jpg" class="d-block w-100 gallery-img" alt="item">
<div class="carousel-caption">
<h5>item1</h5>
<p>desc</p>
</div>
</div>
<div class="carousel-item">
<img src="https://www.guernseys.com/v2/images/Carousel/700x400_1.jpg" class="d-block w-100 gallery-img" alt="item">
<div class="carousel-caption">
<h5>item2</h5>
<p>desc</p>
</div>
</div>
<div class="carousel-item">
<img src="https://www.chancerides.com/wp-content/uploads/2017/09/carrousel_gallery_2.jpg" class="d-block w-100 gallery-img" alt="item">
<div class="carousel-caption">
<h5>item3</h5>
<p>desc</p>
</div>
</div>
<a class="carousel-control-prev" href="#gallery" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">prev</span>
</a>
<a class="carousel-control-next" href="#gallery" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">next</span>
</a>
</div>
</div>