Shadow for Objects Within a Transparent-Background Image

A transparent-background image can be given a shadow along the edges of the non-transparent areas. The transparent areas are ignored.

The CSS filter:drop-shadow(...) declaration is used for the effect.

This example image is used for demonstrations in the article. You see it here before filter:drop-shadow(...) is applied.

This first example with filter:drop-shadow(...) provides a glimpse of the possibilities. The text box below the image presents the entire filter:drop-shadow(...) declaration that the image uses.

filter:drop-shadow(-3px 3px 3px #333333)

This article describes how to create the shadows, how to color them, and how to position the shadows.

Now, the drop-shadow(...) Details

Here is the format for the drop-shadow(...) value. Following the format, the purposes of the positions are described along with examples.

drop-shadow(Xoffset Yoffset BlurAmount ShadowColor)

The CSS measurement units (here all presented as px) can be specified as any valid CSS measurement (px, pt, em, in, mm, …).

As you will have noticed, the drop-shadow(...) format has 4 values. Each of the values is addressed below.

Also at each of the values are one or more examples. Even though only one format value is discussed at a time, the example uses all four. The format being discussed is colored blue in the code of the example. (For explanation of the other format values, see the discussion for the corresponding format value.)

1. The Xoffset number specifies how far to offset the shadow left or right.

   A positive number means the shadow will be offset toward the right. 3px offsets the shadow 3 pixels out from the right side.

   

   filter:drop-shadow(3px 0 3px #333333)

   A negative number means the shadow will be offset toward the left. -3px offsets the shadow 3 pixels out from the left side.

   

   filter:drop-shadow(-3px 0 3px #333333)

   0 means no offset (shadow will peek out both on the left and the right side.

   

   filter:drop-shadow(0 0 3px #333333)

2. The Yoffset number specifies how far to offset the shadow up or down.

   A positive number means the shadow will be offset down. 3px offsets the shadow 3 pixels out from the bottom.

   

   filter:drop-shadow(0 3px 3px #333333)

   A negative number means the shadow will be offset up. -3px offsets the shadow 3 pixels out from the top.

   

   filter:drop-shadow(0 -3px 3px #333333)

   0 means no offset (shadow will peek out both on the top and bottom.

   

   filter:drop-shadow(0 0 3px #333333)

3. The BlurAmount specifies how wide the blur is.

   3px means the edge of the shadow blurs for 3 pixels. If the Xoffset or the Yoffset is 3px, then the entire shadow is blurred. But if the offset is 5px, then 2 pixels of the shadow are not blurred and 3 pixels are blurred.

   

   filter:drop-shadow(-5px 5px 3px #333333)

   0 means there is no blur. Instead, the edge of the shadow will be a sharp edge.

   

   filter:drop-shadow(-5px 5px 0 #333333)

4. The ShadowColor is where you specify the color of the shadow. The color may be specified as hex, rgb, hsl, or color name.

   Examples of color specifications are hex (#bebebe), rgb (rgb(190,190,190)), hsl (hsl(0,0%,75%)), or color name (darkgray)

   

   filter:drop-shadow(-5px 5px 0 lavender)

Implementation

To implement, give your image a filter style. Here is example code:

<img src="https://www.willmaster.com/possibilities/images/20220315issue.png" 
   style="
      filter:drop-shadow(12px 0 3px #bebebe); 
      max-width:100%;" 
   alt="shadowed image">

Below is the result of the above image tag:

Once understood, you have a CSS tool like no other, the ability to outline non-transparent areas within a transparent-background image.

This article first appeared with an issue of the Possibilities newsletter.

Will Bontrager