CSS Box Shadow In All Directions
Adjusting horizontal (x) and vertical (y) offsets of box-shadow property helps create box shadows in different directions. Both positive and negative values render box shadows in opposite directions.
- Top
- Right
- Bottom
- Left
- Top Right
- Top Bottom
- Top Left
- Bottom Right
- Bottom Left
- Right Left
- Top Bottom Right
- Top Bottom Left
- All Sides
Box Shadow Property Tips
The horizontal offset of the shadow, positive, means the shadow will be on the right of the box. A negative offset will put the shadow on the left of the box.
In the vertical offset of the shadow, a negative one means the box-shadow will be above the box, and a positive one means the shadow will be below the box.