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

User · Answer

The most simple solution and easiest way is to add shadow for all four side  CSS  box-shadow  0 0 2px 2px  ccc     with blur shadow   box-shadow  0 0 0 2px  ccc     without blur shadow

User · Answer

Just simple as this code   box-shadow  0px 0px 2px 2px black    any color you want

User · Answer

CSS3 box-shadow  4 sides symmetry   each side with the same color    x000D   x000D   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     x000D   lt div class  four-sides-with-same-color  gt  lt  div gt  x000D   x000D   x000D     each side with a different color    x000D   x000D   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     x000D   lt div class  four-sides-with-different-color  gt  lt  div gt  x000D   x000D   x000D   screenshots   refs https   css-tricks com almanac properties b box-shadow  https   www cnblogs com xgqfrms p 13264347 html

User · Answer

It s because of x and y offset  Try this   -webkit-box-shadow  0 0 10px  fff          box-shadow  0 0 10px  fff    edit  year later     Made the answer more cross-browser  as requested in comments     btw  there are many css3 generator nowadays   css3 me  css3maker  css3generator etc

User · Answer

Use this css code for all four sides   box-shadow  0px 1px 7px 0px rgb 106  111  109

User · Answer

This looks cool   -moz-box-shadow  0 0 5px  999  -webkit-box-shadow  0 0 5px  999  box-shadow  0 0 5px  999

User · Answer

See  http   jsfiddle net thirtydot cMNX2 8   input       -webkit-box-shadow  0 0 5px 2px  fff      -moz-box-shadow  0 0 5px 2px  fff      box-shadow  0 0 5px 2px  fff

User · Answer

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

User · Answer

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

User · Answer

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

[css] How to apply box-shadow on all four sides?

Examples related to css

Examples related to box-shadow