Bom dia, em um projeto que estou desenvolvendo ele tem um tipo de "sombra" para deixar um texto branco mais visível dentro da imagem, o problema é que já tentei ambos Text-Shadow e Box-Shadow na div do texto mas não se tem o resultado esperado, o Text conseguiu colocar uma sombra mas uma sombra não tão destacada. Gostaria de uma ajuda em como proceder, eis abaixo a imagem do Wireframe do site, o HTML, e o CSS.
.item-segmento {
text-align: center;
margin: 25px 0;
overflow: hidden;
}
.item-segmento span {
transition: all .5s ease;
color: #FFF;
font-size: 18px;
text-transform: uppercase;
text-shadow: 0px 0px 20px #000000;
}
.img-segmento {
height: 300px;
margin-bottom: 10px;
position: relative;
}
.img-segmento>img {
object-fit: cover;
width: 100%;
height: 100%;
border-radius: 100%;
}
.img-segmento .segmento-titulo {
transition: all .5s ease;
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
display: table;
color: #FFF;
}
.item-segmento .segmento-titulo>div {
color: #FFF;
vertical-align: middle;
display: table-cell;
}
<div class="item-segmento col-xs-12 col-sm-6 col-md-4">
<a href="segmento.php?id=1">
<div class="img-segmento">
<img src="https://picsum.photos/200/300" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
<div class="segmento-titulo">
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
</div>
</div>
</a>
</div>