Text Shadow CSS not working properly

Question

I am trying to make the text shadow effect as per the example below:

This is what I have created:

.yb-shipping {
  color: #f2de4d;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 22px;
  font-weight: bold;
  text-shadow: 0 0 2px rgba(1, 96, 116, 1);
  text-transform: uppercase;
}

<div class="yb-shipping">Free Shipping</div>

Not able to make as attached, should I try something else except text-shadow?

Please suggest

Answer 1

If you use a blur radius, the shadow will be blurred, and that's not the intended result.
You can, however, use multiple text-shadows. So that's the solution: add several of them, all with a blur radius of 0, in different directions.

.yb-shipping {
  color: #f2de4d;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 22px;
  font-weight: bold;
  text-shadow: -2px -2px 0 rgba(1, 96, 116, 1),
               2px -2px 0 rgba(1, 96, 116, 1),
               -2px 2px 0 rgba(1, 96, 116, 1),
               2px 2px 0 rgba(1, 96, 116, 1),
               -3px 0 0 rgba(1, 96, 116, 1),
               3px 0 0 rgba(1, 96, 116, 1),
               0 -3px 0 rgba(1, 96, 116, 1),
               0 3px 0 rgba(1, 96, 116, 1);
  text-transform: uppercase;
}

<div class="yb-shipping">Free Shipping</div>