- Instant help with your CSS coding problems

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.

Share "How to add a box shadow to all side of an element?"
Tags:
drop shadow, drop shadow equally, add shadow to all sides
Technical term:
Add a box shadow to all side of an element
Interesting things
OpanAi's ChatGPT