How to shadow a text

Question

Good morning, in a project that I’m developing it has a kind of "shadow" to leave a white text more visible inside the image, the problem is that I’ve tried both Text-Shadow and Box-Shadow in the text div but it does not have the expected result, Text managed to put a shadow but a shadow not so highlighted. I would like a help on how to proceed, here is the image of Wireframe of the site, HTML, and CSS.

Wireframe:

.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>

Answer 1

Try

text-shadow: 2px 2px #FF0000;

Answer 2

Use the attribute in your css

for text use

text-shadow: 0 0 3px #000;

for Divs use

box-shadow: 0 0 5px #000;

it is good you give a studied on these attributes to facilitate in the editing of your styles.

Answer 3

I think that the best way for this effect is not with text-shadow but by placing a radial-gradient behind the text.

In class . img-segment . segment-title vc places the gradient at the bottom, going from black to transparent. After that you put the text-shadow smaller to give more definition in the letters. Vc can control the size and color of the radial-gradient in this property

background-image: radial-gradient(at center, rgba(0,0,0,95) 0%,Transparent 50%, Transparent 50%);

Would that be the fit.

  .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 3px #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;
    background-image: radial-gradient(at center, rgba(0,0,0,0.95) 0%,transparent 50%, transparent 50%);
  }
  
  .item-segmento .segmento-titulo>div {
    color: #FFF;
    vertical-align: middle;
    display: table-cell;
  }

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />

<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://placekitten.com/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>

Answer 4

Apparently the text-shadow is working, if you do not like the result I recommend you use filters, as in the example:

In the second image I just used the filter: brightness(60%);, so the text becomes more visible.