How to apply box-shadow on all four sides?

Question

I\'m trying to apply a box-shadow on all four sides. I could only get it on 2 sides:

Answer 1

CSS3 box-shadow: 4 sides symmetry

1. each side with the same color

:root{
  --color: #f0f;
}

div {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 50px auto;
  width: 200px;
  height: 100px;
  background: #ccc;
}

.four-sides-with-same-color {
  box-shadow: 0px 0px 10px 5px var(--color);
}

<div class="four-sides-with-same-color"></div>

2. each side with a different color

:root{
  --color1: #00ff4e;
  --color2: #ff004e;
  --color3: #b716e6;
  --color4: #FF5722;
}

div {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 50px auto;
  width: 200px;
  height: 100px;
  background-color: rgba(255,255,0,0.7);
}

.four-sides-with-different-color {
  box-shadow: 
    10px 0px 5px 0px var(--color1),
    0px 10px 5px 0px var(--color2),
    -10px 0px 5px 0px var(--color3),
    0px -10px 5px 0px var(--color4);
}

<div class="four-sides-with-different-color"></div>

screenshots

refs

https://css-tricks.com/almanac/properties/b/box-shadow/

https://www.cnblogs.com/xgqfrms/p/13264347.html

Answer 2

You can different combinations at the following link.
https://www.cssmatic.com/box-shadow

The results which you need can be achieved by the following CSS

-webkit-box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);

Answer 3

I found the http://css-tricks.com/forums/topic/how-to-add-shadows-on-all-4-sides-of-a-block-with-css/ site.

.allSides
{
    width:350px;height:200px;
    border: solid 1px #555;
    background-color: #eed;
    box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -o-box-shadow: 0 0 10px rgba(0,0,0,0.6);
}

Answer 4

Understand box-shadow syntax and write it accordingly

box-shadow: h-offset v-offset blur spread color;

h-offset: Horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box - Required

v-offset: Vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box - Required

blur: Blur radius (The higher the number, the more blurred the shadow will be) - Optional

color: Color of the shadow - Optional

spread: Spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow - Optional

inset: Changes the shadow from an outer shadow to an inner shadow - Optional

box-shadow: 0 0 10px #999;

box-shadow works better with spread

box-shadow: 0 0 10px 8px #999;

use 'inset' to apply shadow inside of the box

box-shadow: 0 0 8px inset #999;
(or)
box-shadow: 0 0 8px 8px inset #999;

use rgba (red green blue alpha) to adjust the shadow more efficiently

box-shadow: 0 0 8px inset rgba(153, 153, 153, 0.8); 
(or)
box-shadow: 0 0 8px 8px inset rgba(153, 153, 153, 0.8);