Add CSS box shadow around the whole DIV

Question

Is it possible to have the shadow surround the entire DIV   -moz-box-shadow  3px 3px 3px  ccc  -webkit-box-shadow  3px 3px 3px  ccc  box-shadow  3px 3px 3px  ccc    I know the order of attributes goes    Horizontal offset Vertical offset Blur radius Color   But I wonder if it s possible to make the shadow go all around it instead of showing up only on one edge or side

User · Answer

Just use the below code  It will shadow surround the entire DIV  -webkit-box-shadow  -1px 1px 5px 9px rgba 0 0 0 0 75   -moz-box-shadow  -1px 1px 5px 9px rgba 0 0 0 0 75   box-shadow  -1px 1px 5px 9px rgba 0 0 0 0 75     Hope this will work

User · Answer

The CSS code would be   box-shadow  0 0 10px 5px white    That will shadow the entire DIV no matter its shape

User · Answer

Use this below code   border 2px soild  eee    margin  15px 15px   -webkit-box-shadow  2px 3px 8px  eee  -moz-box-shadow  2px 3px 8px  eee  box-shadow  2px 3px 8px  eee    Explanation -  box-shadow requires you to set the horizontal  amp  vertical offsets  you can then optionally set the blur and colour  you can also choose to have the shadow inset instead of the default outset  Colour can be defined as hex or rgba   box-shadow   inset outset h-offset v-offset blur spread color    Explanation of the values      inset outset -- whether the shadow is inside or outside the box  If not specified it will default to outset   h-offset -- the horizontal offset of the shadow  required value   v-offset -- the vertical offset of the shadow  required value   blur -- as it says  the blur of the shadow  spread -- moves the shadow away from the box equally on all sides  A positive value causes the shadow to expand  negative causes it to contract  Though this value isn t often used  it is useful with multiple shadows    color -- as it says  the color of the shadow  Usage  box-shadow 2px 3px 8px  eee   a gray shadow with a horizontal outset of 2px  vertical of 3px and a blur of 8px

User · Answer

Yes  don t offset vertically or horizontally  and use a relatively large blur radius  fiddle  Also  you can use multiple box-shadows if you separate them with a comma  This will allow you to fine-tune where they blur and how much they extend  The example I provide is indistinguishable from a large outline  but it can be fine-tuned significantly more  fiddle  You missed the last and most relevant property of box-shadow  which is spread-distance  You can specify a value for how much the shadow expands or contracts  makes my second example obsolete   fiddle  The full property list is   box-shadow   horizontal-offset   vertical-offset   blur-radius   spread-distance   color  inset   But even better  read through the spec

User · Answer

You re offsetting the shadow  so to get it to uniformly surround the box  don t offset it   -moz-box-shadow  0 0 3px  ccc  -webkit-box-shadow  0 0 3px  ccc  box-shadow  0 0 3px  ccc

[css] Add CSS box shadow around the whole DIV

Examples related to css