CSS Drop Shadows for Images

The CSS filter property can be used in many ways. This article addresses only the drop-shadow() value.

Here is an example to illustrate the drop-shadow effect. You'll see a red drop shadow for a dark-cloud image.

Here is the source code for the above.

<img src="https://www.willmaster.com/possibilities/images/possart20241015.jpg" 
style="
   filter:drop-shadow(9px 16px 7px #8b0909);<
   max-width:100%;">

The first value is the width of the drop shadow for the right side of the image. To put the drop shadow on the left size, use a negative number. For no left and no right shadow, specify 0 (zero).

The second value is the width of the drop shadow for the bottom of the image. To put the drop shadow on the top, use a negative number. For no top and no bottom shadow, specify 0 (zero).

The third value is the width of blur. If the blur is specified as 0 (zero), the shadow has no blur. If the blur width is equal to a shadow, the entire shadow is affected by the blur. If the blur is larger than a shadow, the blur is larger than the shadow and is also likely to extend out the non-shadow side of the image.

The fourth value is the color of the shadow. It may have any HTML color value.

The CSS filter property is quickly implemented when a drop shadow for an image would have a positive effect on the web page design.

(This content first appeared in Possibilities newsletter.)

Will Bontrager