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

Mr Lister · Accepted Answer · 2017-01-15 09:58:28Z

8

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>

answered Jan 15, 2017 at 9:58

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Asons · Accepted Answer · 2017-01-15 09:57:19Z

3

You can combine many shadows

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

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

answered Jan 15, 2017 at 9:57

Asons

87.7k12 gold badges119 silver badges175 bronze badges

Comments

Saeed · Accepted Answer · 2017-01-15 09:54:33Z

1

you can use -webkit-text-stroke as below:

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

answered Jan 15, 2017 at 9:54

Saeed

5722 gold badges12 silver badges20 bronze badges

1 Comment

Oleg Arkhipov Over a year ago

MDN (developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke) says: "Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future."

Tony Hensler · Accepted Answer · 2017-01-15 09:57:14Z

1

Please see the following:-

https://jsfiddle.net/enryhfz3/

If you change you text-shadow to :-

text-shadow:
    -1px -1px 5px rgba(1, 96, 116, 1),  
    1px -1px 5px rgba(1, 96, 116, 1),
    -1px 1px 5px rgba(1, 96, 116, 1),
    1px 1px 5px rgba(1, 96, 116, 1);

answered Jan 15, 2017 at 9:57

Tony Hensler

1,4926 gold badges16 silver badges30 bronze badges

Comments

bxorcloud · Accepted Answer · 2017-01-15 09:58:42Z

0

This generator can help you make text shadow more accureate. http://css3gen.com/text-shadow/ and http://www.css3generator.in/text-shadow.html The codes can be copy and paste directly.

answered Jan 15, 2017 at 9:58

bxorcloud

6891 gold badge8 silver badges21 bronze badges

Collectives™ on Stack Overflow

Text Shadow CSS not working properly

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related