How to make a CSS shadow for top and bottom part of a div?

Question

I need to add a shadow to a DIV with using CSS3. For adding a shadow for the bottom part of the DIV, I use:

-webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.75);
        box-shadow: 0 1px 10px rgba(0, 0, 0, 0.75);

But how to add yet also the same shadow for the top?

Thank you

search would have helped you: [CSS Box Shadow - Top and Bottom Only \[duplicate\]][1] [1]: http://stackoverflow.com/questions/6671375/css-box-shadow-top-and-bottom-only — andreasbecker.de, Mar 17 '14 at 15:13

score 2 · Answer 1 · answered Mar 17 '14 at 19:37

You have 2 posibilities:

1) play with the spread property, in negative, to compensate for the blur and avoid the shadow to show in the sides:

.one {
    box-shadow: 0px 6px 8px -3px rgba(0, 0, 0, 0.75), 0px -6px 8px -3px rgba(0, 0, 0, 0.75);
}

2) clip the result so that again the borders don't show. You will need position: absolute for this one to work:

.two {
    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.75), 0px -6px 8px rgba(0, 0, 0, 0.75);
    clip: rect(-12px, 100px, 62px, 0px);
position: absolute;
}

fiddle

score 1 · Answer 2 · answered Mar 17 '14 at 15:11

1

You can apply multiple box-shadow by separating your arguments with a comma:

box-shadow: 0 1px 10px rgba(0, 0, 0, 0.75), 0 -1px 10px rgba(0,0,0,0.75);

answered Mar 17 '14 at 15:11

Dre

2,933
2
18
21

This will work but will add box-shadow to all sides of the div. – Justin Mar 17 '14 at 15:11

score 0 · Answer 3 · answered Dec 05 '14 at 12:00

0

Something like this is exactly what you need;

.box {
    box-shadow: 0  8px 8px -8px rgba(0,0,0,.75), 
                0 -8px 8px -8px rgba(0,0,0,.75);
}

Here is a jsfiddle

answered Dec 05 '14 at 12:00

Chuks

1,134
11
21

How to make a CSS shadow for top and bottom part of a div?

3 Answers3

fiddle