How do I add a box shadow to an image in CSS?

You can add a box shadow to an image in CSS by using the box-shadow property on the <img> element.

Adding a shadow effect can significantly enhance the visual presentation of elements on a webpage, including images. The box-shadow CSS property allows you to easily apply one or more shadows around an element's frame.

Understanding the box-shadow Property

The box-shadow property accepts several values that define the appearance of the shadow. According to the references provided, these include:

• Horizontal offset: The position of the shadow horizontally. A positive value places the shadow to the right of the element, while a negative value places it to the left. (e.g., 10px)
• Vertical offset: The position of the shadow vertically. A positive value places the shadow below the element, while a negative value places it above. (e.g., 10px)
• Blur radius (optional): The distance of the blur effect. A larger value creates a more blurred shadow. (e.g., 5px)
• Spread radius (optional): The distance the shadow spreads out from the element. A positive value increases the size of the shadow, while a negative value decreases it. (e.g., 2px)
• Color (optional): The color of the shadow. If not specified, the color defaults to the text color of the element or its parent. (e.g., blue)
• inset (optional): Changes the shadow from an outer shadow (the default) to an inner shadow, casting it inside the element's frame.

The basic syntax for a single shadow is:

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

Applying box-shadow to an Image

To apply a box shadow to an image, you select the <img> tag (or a class/ID assigned to it) and use the box-shadow property.

Example HTML:

<img src="your-image.jpg" alt="Description of image" class="shadowed-image">

Example CSS:

.shadowed-image {
  box-shadow: 10px 10px 5px grey; /* horizontal vertical blur color */
}

This CSS code will add a shadow 10 pixels to the right, 10 pixels down, with a 5-pixel blur, and a grey color to any image with the class shadowed-image.

box-shadow Parameters Explained

Let's break down the parameters using the reference information.

Examples Based on References

1. Horizontal and Vertical Shadow:

   .image-shadow-offset {
     box-shadow: 10px 10px; /* Shadow 10px right and 10px down */
   }

   (Matches reference: Specify a horizontal and a vertical shadow: div { box-shadow: 10px 10px; ...)

2. Specifying Color:

   .image-shadow-color {
     box-shadow: 5px 5px blue; /* Shadow 5px right, 5px down, blue color */
   }

   (Matches reference: Specify a color for the shadow: div { ...)

3. Adding Blur:

   .image-shadow-blur {
     box-shadow: 5px 5px 8px grey; /* Shadow 5px right, 5px down, 8px blur, grey color */
   }

   (Matches reference: Add a blur effect to the shadow: div { ...)

4. Setting Spread Radius:

   .image-shadow-spread {
     box-shadow: 5px 5px 5px 2px grey; /* 5px offset, 5px blur, 2px spread, grey color */
   }

   (Matches reference: Set the spread radius of the shadow: div { ...)

5. Using the inset parameter:

   .image-shadow-inset {
     box-shadow: inset 0 0 10px red; /* Inner shadow with no offset, 10px blur, red color */
   }

   (Matches reference: Add the inset parameter: div { ...)

6. Multiple Shadows:
   You can apply multiple shadows by separating the shadow values with commas. Each set of values defines a distinct shadow layer.

   .image-multiple-shadows {
     box-shadow:
       5px 5px blue,      /* First shadow */
       10px 10px red,     /* Second shadow */
       15px 15px green;   /* Third shadow */
   }

   (Matches reference: div { box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;)

By combining these parameters, you can create a wide variety of shadow effects for your images.