CODEWITHSUNDEEP
css
Prabhu
Prabhu

Reputation: 1149

Box shadow for bottom side only

I have a box of content and need to give a shadow for that. But I want to give a shadow for the bottom of the box only. I used this css box-shadow: 0 3px 5px #000000;

If I give this code it shows left, right, and bottom. I need the bottom only

Can anyone suggest how to solve this one? Thanks a lot

Upvotes: 35

Views: 165779

Answers (4)

alireza
alireza

Reputation: 161

Specify negative value to spread value. This works for me:

box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.1);

Upvotes: 1

Fizer Khan
Fizer Khan

Reputation: 92745

You have to specify negative spread in the box shadow to remove side shadow

-webkit-box-shadow: 0 10px 10px -10px #000000;
   -moz-box-shadow: 0 10px 10px -10px #000000;
        box-shadow: 0 10px 10px -10px #000000;

Check out http://dabblet.com/gist/9532817 and try changing properties and know how it behaves

Upvotes: 15

Alcides Queiroz
Alcides Queiroz

Reputation: 9576

-webkit-box-shadow: 0 3px 5px -3px #000;
-moz-box-shadow: 0 3px 5px -3px #000;
box-shadow: 0 3px 5px -3px #000;

Upvotes: 0

Riz
Riz

Reputation: 10246

You can do the following after adding class one-edge-shadow or use as you like.

.one-edge-shadow {
    -webkit-box-shadow: 0 8px 6px -6px black;
       -moz-box-shadow: 0 8px 6px -6px black;
            box-shadow: 0 8px 6px -6px black;
}

Source

Upvotes: 71

Related Questions