How create shadow effect for div [duplicate]

Question

How can I set the shadow as in the picture using css?

Here a better drawing http://www.sumoware.com/images/temp/xzxmrkknxgcgmgfn.png

This is my current css code

div{
    -webkit-box-shadow: 76px 50px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 76px 50px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 76px 50px 5px 0px rgba(0,0,0,0.75);}
}

Answer 1

Your only option is to use multiple box-shadows. However, there are some restrictions:

• You must use a semi-opaque colour, because they will show through each other.
• You have to manually specify each box-shadow property, but you can do it programatically with either JS, or with a CSS pre-processing language (e.g. LESS or SASS).

div {
  background-color: steelblue;
  box-shadow:
    2px 2px 5px 0px #555,
    4px 4px 5px 0px #555,
    6px 6px 5px 0px #555,
    8px 8px 5px 0px #555,
    10px 10px 5px 0px #555,
    12px 12px 5px 0px #555,
    14px 14px 5px 0px #555,
    16px 16px 5px 0px #555,
    18px 18px 5px 0px #555,
    20px 20px 5px 0px #555,
    22px 22px 5px 0px #555,
    24px 24px 5px 0px #555,
    26px 26px 5px 0px #555,
    28px 28px 5px 0px #555,
    30px 30px 5px 0px #555,
    34px 34px 5px 0px #555,
    36px 36px 5px 0px #555;
  width: 100px;
  height: 100px;
}

<div></div>

I have also made an example using SCSS: http://codepen.io/anon/pen/WvELEv

You can set the opacity of the shadow, by using a pseudo-element instead:

• Use position: relative on the parent, and position the pseudo-element absolutely
• Force pseudo-element to have the exact same dimension as its parent, by setting all for cardinalities to 0
• Apply box-shadow property to pseudo-element
• Instead of changing the background-color to use the rgba() channel, use opacity to control transparency instead.

body {
  background-color: yellow;
}
div {
  background-color: steelblue;
  width: 100px;
  height: 100px;
  position: relative;
}
div::before {
  opacity: 0.25;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  box-shadow: 2px 2px 5px 0px #555, 4px 4px 5px 0px #555, 6px 6px 5px 0px #555, 8px 8px 5px 0px #555, 10px 10px 5px 0px #555, 12px 12px 5px 0px #555, 14px 14px 5px 0px #555, 16px 16px 5px 0px #555, 18px 18px 5px 0px #555, 20px 20px 5px 0px #555, 22px 22px 5px 0px #555, 24px 24px 5px 0px #555, 26px 26px 5px 0px #555, 28px 28px 5px 0px #555, 30px 30px 5px 0px #555, 34px 34px 5px 0px #555, 36px 36px 5px 0px #555;
}

<div></div>

Answer 2

An alternative effect could possibly be made with pseudo elements:

div {
  height: 100px;
  width: 100px;
  background: gray;
  position: relative;
}
div:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  height: 30px;
  width: 100%;
  background: dimgray;
  transform: skewX(45deg);
  transform-origin: top left;
  box-shadow: 0 10px 20px dimgray;
}
div:after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 30px;
  height: 100%;
  background: dimgray;
  transform: skewY(45deg);
  transform-origin: top left;
  box-shadow: 10px 0 20px dimgray;
}

<div></div>