2

I use my CSS page below. He applies a box-shadow on the 4 sides.

I want it to be applied only to the right, bottom and left.

How to apply box-shadow only on 3 sides ?

-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.22);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.22);
-ms-box-shadow: 0 0 10px rgba(0,0,0,0.22);
-o-box-shadow: 0 0 10px rgba(0,0,0,0.22);
box-shadow: 0 0 10px rgba(0,0,0,0.22);
mathieulbt
  • 63
  • 2
  • 7
  • I use this tool to find how I like it. It will come down to self preference. https://www.cssmatic.com/box-shadow – jmag Aug 07 '18 at 16:47

2 Answers2

2

You can always do something like:

.shadow-box {
  background-color: #ddd;
  margin: 0px auto;
  padding: 10px;
  width: 220px;
  box-shadow: 0px 8px 10px gray, 
    -10px 8px 15px gray, 10px 8px 15px gray;
 }
<div class="shadow-box">Box with shadows</div>
martinsoender
  • 213
  • 1
  • 9
  • 2
    Please explain how the above code provides a working solution. – Blazemonger Aug 07 '18 at 16:53
  • 1
    For people looking for more explanation, this site has great examples and playgrounds. https://css-tricks.com/almanac/properties/b/box-shadow/ – Corné Feb 10 '22 at 04:51
0

box-shadow supports only X & Y offset, but you can achieve box-shadow to 3 directions, by providing appropriate value to the offsets.

Tip : In chrome via inspect element you can easily get the exact values and preview that before using it.

Please refer to snippet below.

#boxShadow {
    display: block;
    margin: auto;
    height: 300px;
    width: 300px;
    background: #cdcdcd;
    box-shadow: 0px 5px 8px 0px #3fab83;
}
<br><div id="boxShadow">
</div>
Robin
  • 81
  • 6