Add a box shadow to all side of an element
Question:
How to add a box shadow to all side of an element? Answer:
.shadow-all {
width: 100px;
height: 100px;
box-shadow: 0 0 5px 5px #00000015;
}
Description:
Syntax: box-shadow: offset-x offset-y blur-radius spread-radius color
The box-shadow
CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow
is described by X
and Y
offsets relative to the element, blur
and spread
radius, and color
.
In order for the shadow to be the same on all sides, the offset-x
and offset-y
coordinates (the first 2 parameters) must be set to 0
. Adjust the blur and spread to suit your needs. Finally, define a color with transparency to achieve a nice output.
Reference:
The box-shadow reference
Share "How to add a box shadow to all side of an element?"
Related snippets:
Tags:
drop shadow, drop shadow equally, add shadow to all sides Technical term:
Add a box shadow to all side of an element