The box-shadow Property in CSS

The box-shadow property in CSS is used to add shadow effects to elements. It allows you to create a shadow around an element's frame, enhancing the visual depth and providing a sense of layering on the page. Shadows can be applied to any element, such as divs, images, and buttons, to create various design effects.

Values of box-shadow

The box-shadow property accepts up to five values:

1. horizontal-offset

   • The distance of the shadow from the element along the horizontal axis.
   • Positive values move the shadow to the right, and negative values move it to the left.

   box-shadow: 10px 5px; /* Shadow offset 10px right, 5px down */
   

2. vertical-offset

   • The distance of the shadow from the element along the vertical axis.
   • Positive values move the shadow down, and negative values move it up.

   box-shadow: 10px 5px; /* Shadow offset 5px down */
   

3. blur-radius

   • The blur radius of the shadow. A higher value creates a more blurred shadow.
   • If omitted, the shadow is sharp.

   box-shadow: 10px 5px 15px; /* Shadow blurred by 15px */
   

4. spread-radius

   • The size of the shadow. A positive value makes the shadow larger, while a negative value makes it smaller.
   • This value is optional.

   box-shadow: 10px 5px 15px 5px; /* Shadow expands 5px beyond the blur radius */
   

5. color

   • The color of the shadow. You can use color names, HEX, RGB, RGBA, HSL, or HSLA values.
   • If omitted, the shadow color defaults to the color of the text.

   box-shadow: 10px 5px 15px 5px rgba(0, 0, 0, 0.5); /* Semi-transparent black shadow */
   

Syntax

box-shadow: horizontal-offset vertical-offset blur-radius spread-radius color;

Examples

1. Basic Shadow

   .basic-shadow {
     box-shadow: 10px 10px;
   }
   

2. Shadow with Blur and Spread

   .blur-spread-shadow {
     box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.3);
   }
   

3. Inset Shadow

   • Shadows can also be inset, which places the shadow inside the element, rather than outside.

   .inset-shadow {
     box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5);
   }
   

4. Multiple Shadows

   • You can apply multiple shadows to an element by separating each shadow with a comma.

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

Explanation

• Horizontal Offset: Moves the shadow horizontally relative to the element.
• Vertical Offset: Moves the shadow vertically relative to the element.
• Blur Radius: Controls the spread and softness of the shadow's edge. Larger values create more blur.
• Spread Radius: Adjusts the size of the shadow. Positive values make the shadow larger, while negative values reduce its size.
• Color: Sets the color and transparency of the shadow.

Use Cases

• Depth and Dimension: Add shadows to elements like cards, buttons, or images to create a sense of depth and layering.
• Focus and Emphasis: Use shadows to highlight or draw attention to specific elements, such as interactive buttons or form fields.
• Design Enhancement: Enhance the overall design of a page with shadows that add visual interest and separation between elements.