Add CSS box shadow around the whole DIV

user_845217 0
Viewed 146532

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.

css
6 Answers

The CSS code would be:

box-shadow: 0 0 10px 5px white;

That will shadow the entire DIV no matter its shape!

user_104626830

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 & 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_97872320

Try following code:

.shodow0
{
box-shadow: 10px 10px 5px lightblue;
}
.shodow1
{
-moz-box-shadow: 0 0 3px #ccc;
-webkit-box-shadow: 0 0 3px #ccc;
box-shadow: 0 0 3px #ccc;
}
.shodow2 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
  margin: 20px;
}

.shodow3  {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;
  margin: 20px;
}

.shodow4
{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.shodow5
{
 width: 100px;
    height: 100px; 
    margin: 15px 0;
    background: #ccc;

    /* Box Shadow */
    /* Opera */
    -o-box-shadow: 5px 5px 5px #666;
    /* IE */
    -ms-box-shadow: 5px 5px 5px #666;
    /* Mozilla FireFox */
    -moz-box-shadow: 5px 5px 5px #666;
    /* Google Chrome */
    -webkit-box-shadow: 5px 5px 5px #666;
    /* Normal */
    box-shadow: 5px 5px 5px #666;
}
<div class="shodow0">
  This a text or DIV text
</div>
<div class="shodow1">
  This a text or DIV text
</div>
<div class="shodow2">
  This a text or DIV text
</div>
<div class="shodow3">
  This a text or DIV text
</div>
<div class="shodow4">
  This a text or DIV text
</div>
<div class="shodow5">
  This a text or DIV text
</div>

user_167466680
Related