CODEWITHSUNDEEP
cssshadow
JoshP
JoshP

Reputation: 41

How to create white css box shadow

I have the following box shadow css on my site. It looks great in Chrome, but Firefox and IE do not recreate the effect I'm looking for. I want a white solid shadow only on the bottom of a box. How do I make this work for all browsers?

box-shadow: 0px 10px -14px 14px #FFF;
-webkit-box-shadow: 0px 10px -14px 14px #FFF;
-moz-box-shadow: 0px 10px -14px 14px rgb(255, 255, 255);

Upvotes: 4

Views: 34640

Answers (3)

Charlie
Charlie

Reputation: 11787

You have a negative value for the shadow size:

box-shadow: 0px 10px -14px 14px #FFF;

A negative 14px shadow would be nothing, as it would be less than it having a size of 0. If you're looking for an inset shadow, simply add that to the style:

box-shadow: inset...

Solution, change -14px to 14px.

Upvotes: 0

middleinitial
middleinitial

Reputation: 659

I've got it working in IE9 and FF by simply removing the vendor prefix lines. All you should need is:

box-shadow: 0px 10px -14px 14px #FFF;

Upvotes: 0

user1968030
user1968030

Reputation:

Use this article or this code:

 -moz-box-shadow: 13px 13px 0px 0px #FFFFFF;
    -webkit-box-shadow: 13px 13px 0px 0px #FFFFFF;
     box-shadow: 13px 13px 0px 0px  #FFFFFF;

Upvotes: 5

Related Questions