Box Shadow - CSS

CSS box-shadow property is used to create a shadow effect around an element.

Syntax:

box-shadow: h-shadow v-shadow blur spread color inset;

• h-shadow: Required. Specifies the horizontal position of the shadow
• v-shadow: Required. Specifies the vertical position of the shadow
• blur: Optional. Specifies the blur distance of the shadow. Default is 0
• spread: Optional. Specifies the spread distance of the shadow. Default is 0
• color: Optional. Specifies the color of the shadow. Default is the text color
• inset: Optional. Changes the shadow from an outer shadow (default) to an inner shadow

Example:

.box {
  box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.3);
}

• The first two values (2px and 2px) are for the horizontal and vertical shadow offsets respectively.
• The third value (5px) is for the blur radius to create a Gaussian blur effect around the shadow.
• The fourth value (2px) is for the spread distance of the shadow.
• The fifth value (rgba(0, 0, 0, 0.3)) is for the color and transparency of the shadow.

Box Shadow can be used to create various effects like flat, deep, long, multiple, 3D, animated etc.

Flat Shadow

.box {
  box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.3);
}

Deep Shadow

.box {
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.4), 
              0 0 10px 2px rgba(0, 0, 0, 0.3);
}

Long Shadow

.box {
  box-shadow: 8px 8px 0 0 #008CBA;
}

Multiple Shadow

.box {
  box-shadow: 0 0 0 10px #5C5C5C, 
              0 0 0 15px #444444, 
              0 0 0 20px #2E2E2E, 
              0 0 0 25px #000000;
}

3D Shadow

.box {
  box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.2), 
              0 0 20px 5px rgba(0, 0, 0, 0.2), 
              0 0 30px 10px rgba(0, 0, 0, 0.2);
}

Animated Shadow

.box {
  animation: shadow-pulse 10s infinite;
}

@keyframes shadow-pulse {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 168, 255, 0.7);
  }
  50% {
    box-shadow: 0 0 0 25px rgba(0, 168, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 168, 255, 0.7);
  }
}

Box Shadow is a very useful and creative property in CSS to give a great look and feel to the webpage elements.