Double sided box-shadow

Question

I have a main content div with the property;

box-shadow: inset -15px 0 15px -15px;

I wish to make it so that the div has the same box shadow on each side, but I am not sure on how to do this. Here is the JSFiddle Demo.

HTML :

<div id="content"></div>

CSS :

#content {
    width: 100px;
    height: 100px;
    background-color: #999999;
    position: absolute;
    left: 10px;
    top: 10px;
    box-shadow: inset -15px 0 15px -15px;
}

Just as an FYI, post your code in your question, not just in an external Fiddle. — Mitya, Jun 28 '14 at 11:43

score 1 · Answer 1 · answered Jun 28 '14 at 11:42

1

try this box-shadow: inset -15px 0 15px -15px, inset 15px 0 15px -15px;

answered Jun 28 '14 at 11:42

amol

1,535
9
10

André Ferraz · Answer 2 · 2014-06-28T11:54:34.030

0

That's very simple to do, according to W3SCHOOLS the synstax for box-shadow is

box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

You can replace the none with inset or any other properties for the kind of shadow you want. the h-shadow is for the horizontal (left and right), the v-shadow is for the vertical (up and bottom) the blur is how sharp you want it to be and the spread is how far from each side you want it to be, also bare in mind these values are specified in px and finally color.

This is an example:

box-shadow: inset 0px 0px 5px 10px #888;

edited Jun 28 '14 at 11:54

answered Jun 28 '14 at 11:43

André Ferraz

1,511
11
29

@Ryan I explained the syntax and gave you a solution for it on my updated answer, I hope it helped :) – André Ferraz Jun 28 '14 at 11:58

score 0 · Answer 3 · answered Jun 28 '14 at 11:48

Just slightly modify your original CSS code to add left and right shadow:

#content {
    width: 100px;
    height: 100px;
    background-color: #999999;
    position: absolute;
    left: 10px;
    top: 10px;
    box-shadow: inset -15px 0 15px -15px, inset 15px 0 15px -15px;
}

score 0 · Answer 4 · edited May 23 '17 at 11:58

This has already been answered here

-webkit-box-shadow: inset 25px 0px 25px -25px rgba(0, 0, 0, 0.45), 
                    inset -25px 0px 25px -25px rgba(0, 0, 0, 0.45);
-moz-box-shadow: inset 25px 0px 25px -25px rgba(0, 0, 0, 0.45), 
                 inset -25px 0px 25px -25px rgba(0, 0, 0, 0.45);
box-shadow: inset 25px 0px 25px -25px rgba(0, 0, 0, 0.45), 
            inset -25px 0px 25px -25px rgba(0, 0, 0, 0.45);

Here is a jsfiddle

score -1 · Answer 5 · answered Jun 28 '14 at 11:44

-1

Try This

box-shadow: inset 0px 0px 5px 10px #8888;

Demo

answered Jun 28 '14 at 11:44

Sid

801
8
19

Double sided box-shadow

5 Answers5