How create shadow effect for div

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);}
}

maybe it's the quality or style of drawing, but what is the key difference between the two shadows you illustrated? Are you trying to make the vertical part of the shadow longer than the horizontal part? — light, Jun 17 '15 at 08:20
@light I think OP wants a three-dimensional shadow, i.e. whose edges are joined diagonally to the original object that casted it (looking like a cube, instead of two flat layers). — Terry, Jun 17 '15 at 08:27
Yea, the drawing kinda suggest that, but the title and the text of the question seems to say it's about "setting length", which seems to be totally different in meaning. — light, Jun 17 '15 at 08:29
sorry i dont know what it is called so i think its a length. — joshua pogi 28, Jun 17 '15 at 08:33
Hi @joshuapogi28 you may want to edit the question so that it better reflects what you're trying to do. It's evidently not "set length" of shadow — light, Jun 17 '15 at 08:33
Read Terry's comment above for the correct way to ask your question :) — light, Jun 17 '15 at 08:34
what do you suggest for the title of the question? i'm not good at english sorry :D — joshua pogi 28, Jun 17 '15 at 08:38
I removed the old drawings and embedded the new one to solve the confusion about what you want to achieve. — Wilt, Jun 17 '15 at 09:10

score 6 · Accepted Answer · edited May 23 '17 at 12:24

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>

this is the way that i try before i ask here. but the problem is the opacity of shadow is the problem because it through each other by the way thanks. i will use this :D — joshua pogi 28, Jun 17 '15 at 08:37
@joshuapogi28 You can have slightly transparent shadows, but it is more complicated and requires the use of pseudo-elements ;) I'll update my answer soon. — Terry, Jun 17 '15 at 08:43
thanks. you are good. can you create a material icon using bootstrap Glyphicons? to become like this? http://assets.materialup.com/uploads/ec59074c-0609-4c2a-ba01-f1d556e8ca6a/teaser.png — joshua pogi 28, Jun 17 '15 at 08:53
@joshuapogi28 Possible, but you will have to use text-shadow if the twitter icon is a glyph. This is as close as one can get: https://jsfiddle.net/teddyrised/ssexypqb/ — Terry, Jun 17 '15 at 09:21
thanks dude. i found the answer of my question here. http://enjoycss.com/previews/gf_3.html — joshua pogi 28, Jun 17 '15 at 09:28

score 4 · Answer 2 · answered Jun 17 '15 at 08:52

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>

How create shadow effect for div

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

2 Answers2