css box shadow property is not working in safari

Question

box-shadow: 3px 3px 6px 6px;

this property is working in chrome firefox IE but not in safari 5 browser

I tried writing like this but it isn't working

-webkit-box-shadow:3px 3px 6px 6px;

could be a CSS rendering issue with safari on ur machine..try the same on a different safari on a different pc. — Newton Sheikh, Sep 23 '13 at 06:52

score 28 · Answer 1 · answered Sep 23 '13 at 06:56

28

-webkit-appearance: none;
-webkit-box-shadow: 3px 3px 6px 6px #addacolor;
box-shadow: 3px 3px 6px 6px #addacolor;

answered Sep 23 '13 at 06:56

Mini John

7,855
9
59
108

10

In my case -webkit-appearance: none helped; – dehumanizer Oct 16 '16 at 23:38

NullPoiиteя · Answer 2 · 2013-11-02T15:38:35.260

5

you haven't defined color here (box-shadow: h-shadow v-shadow blur spread color inset;)

<color> If not specified, the color used depends on the browser - it is usually the value of the color property, but note that Safari currently paints a transparent shadow in this case.

so define color for safari

-webkit-box-shadow: 3px 3px 6px 6px #color_you_want;

edited Nov 02 '13 at 15:38

answered Sep 23 '13 at 06:54

NullPoiиteя

56,591
22
125
143

2

I really appreciate comment with down vote .. and trust me i am not stereotype who do revenge down vote :) – NullPoiиteя Sep 23 '13 at 07:01

score 3 · Answer 3 · answered Sep 13 '17 at 10:03

3

For reference, I had a similar problem with this box-shadow :

box-shadow: 0 0.06rem 0 0 rgba(44, 43, 63, 0.1); (very small shadow!)

It was working in other browsers except for Safari(v.8) who didn't show that shadow. I had to increase the value.

answered Sep 13 '17 at 10:03

Mohamed Ramrami

12,026
4
33
49

score 1 · Answer 4 · answered Sep 23 '13 at 06:53

1

Have you tried with

-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;

answered Sep 23 '13 at 06:53

Anagio

3,005
9
44
81

@alliprashanth you're welcome if you found this helpful feel free to up vote or mark it as the answer – Anagio Sep 23 '13 at 07:01

score 1 · Answer 5 · answered Sep 23 '13 at 06:55

1

#example1 {
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
 box-shadow: 10px 10px 5px #888;
 }

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

http://www.css3.info/preview/box-shadow/

answered Sep 23 '13 at 06:55

Vinay Pratap Singh Bhadauria

9,829
3
28
49

css box shadow property is not working in safari

5 Answers5

Linked