- Instant help with your CSS coding problems

Add a box shadow to only one side of an element

Question:
How to add a box shadow to only one side of an element?
Answer:
.shadow-top {
  box-shadow: 0 -5px 3px -3px #00000030;
}

.shadow-right {
  box-shadow: 5px 0 3px -3px #00000030;
}

.shadow-bottom {
  box-shadow: 0 5px 3px -3px #00000030;
}

.shadow-left {
  box-shadow: -5px 0 3px -3px #00000030;
}
Description:

To apply a shadow effect only on one side of an element set the blur value to a positive number and set the spread value to the same size but with a negative sign. Depending on which side you want the shadow on, set the offset value as follows:

  • Top shadow: offset-x: 0 and offset-y: -5px
  • Right shadow: offset-x: 5px and offset-y: 0
  • Bottom shadow: offset-x: 0 and offset-y: 5px
  • Left shadow: offset-x: -5px and offset-y: 0
Share "How to add a box shadow to only one side of an element?"
Tags:
add box shadow to one side only, ad box shadow right, add box shadow left, add box shadow top, add box shadow bottom
Technical term:
Add a box shadow to only one side of an element