box shadow to left and right doesn't work

Question

I want to make box-shadow to the left and right sides,however there is alway a shadow in the top of the box,I have checked my code many times.

#box {
  margin: 0 auto;
  margin-top: 0px;
  border: 1px solid #ffffff;
  border-top-color: #e99f2e;
  overflow: hidden;
  box-shadow: 2px 0 20px 2px #7f7e7f, -2px 0 20px 2px #7f7e7f;
}

<div id="box"></div>

Possible duplicate of [How to get box-shadow on left & right sides only](https://stackoverflow.com/questions/11997032/how-to-get-box-shadow-on-left-right-sides-only) — sol, Jun 14 '17 at 15:41

score 2 · Accepted Answer · answered Jun 14 '17 at 15:59

2

First understand the syntax of box-shadow and then it get's easy to apply box-shadow at any side as you have planned your design,

syntax -
box-shadow : offset-x | offset-y | blur-radius | spread-radius | color

#box {
  margin: 0 auto;
  margin-top: 0px;
  overflow: hidden;
  box-shadow: -10px 0 2px -2px #7f7e7f, 10px 0 2px -2px #7f7e7f;
  height: 150px;
  width: 50%;
  background:#cff;
  margin-top:20px;
}

<div id="box"></div>

answered Jun 14 '17 at 15:59

frnt

8,455
2
22
25

Welcome @W.J :-) – frnt Jun 14 '17 at 16:42
however it won't work at my data :-2px 0 20px -2px #7f7e7f once the blur-radius become 20px,all side will have the shadow .Could help me with that? – William Jun 14 '17 at 17:06
@W.J Check this jsfiddle https://jsfiddle.net/c3eow8me/ you need to adjust offest-x, offset-y and spread-radius – frnt Jun 14 '17 at 17:24
Thank you so much !Last question.How can I control the length of shadow? – William Jun 14 '17 at 18:00
@W.J Increase length, you need to do that using blur-radius and spread-radius, keep on changing until you get planned result. https://jsfiddle.net/c3eow8me/1/ – frnt Jun 15 '17 at 06:43

score 0 · Answer 2 · answered Jun 14 '17 at 15:42

0

There is a hack actually.

You can achieve this by adding an "empty" top and bottom shadow.

box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(30, 53, 125, 0.9), -12px 0 15px -4px rgba(30, 53, 125, 0.9);

answered Jun 14 '17 at 15:42

Konstantinos Koletsas

239
1
16

Patrick Roberts · Answer 3 · 2017-06-14T17:56:20.383

0

You can achieve this effect if you set the spread to the negative of blur parameter. For the left box shadow, set position to negative blur and the right box shadow, position to positive blur. I used 20px in this demo:

#box {
  margin: 0 auto;
  margin-top: 40px;
  border: 1px solid #ffffff;
  border-top-color: #e99f2e;
  overflow: hidden;
  width: 150px;
  height: 150px;
  box-shadow: 20px 0px 20px -20px #7f7e7f, -20px 0px 20px -20px #7f7e7f;
}

<div id="box"></div>

Check out this CSS Box-shadow generator to explore further.

edited Jun 14 '17 at 17:56

answered Jun 14 '17 at 15:45

Patrick Roberts

49,224
10
102
153

Thank you for help! – William Jun 14 '17 at 16:35
however it won't work at my data :-2px 0 20px -2px #7f7e7f once the blur-radius become 20px,all side will have the shadow .Could help me with that? – William Jun 14 '17 at 17:13
first and last value should be -20px, not -2px – Patrick Roberts Jun 14 '17 at 17:52

score 0 · Answer 4 · answered Jun 14 '17 at 15:58

I don't think this is as good as the other answers, but this is an alternative approach using absolute positioned pseudo elements with shadows.

.lr-shadow {
  background:#fff;
  border: 1px solid #fff;
  border-top-color: #e99f2e;
  width:100%;
  max-width:500px;
  height:200px;
  position:relative;
  margin:0 auto;
}
.lr-shadow:before, .lr-shadow:after {
  box-shadow: 0 0 20px 2px #7f7e7f;
  content:" ";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  height:90%;
  z-index:-1;
}
.lr-shadow:before {
  left:5px;
}
.lr-shadow:after {
  right:5px;
}

<div class="lr-shadow"></div>

Thank you for reply!Looks prefect! – William Jun 14 '17 at 16:34 — William, Jun 14 '17 at 16:34

box shadow to left and right doesn't work

4 Answers4