Drop Shadow
The drop shadow parameters draw a shadow shaped by the image’s own transparency, the way the CSS filter: drop-shadow() function does. They are what lift a product cut-out, a card or a logo off the page without any CSS.
There are four kinds of shadow, chosen with drop-shadow-type:
| Type | Shadow |
|---|---|
flat (default) | The familiar soft CSS-style shadow, offset from the subject |
cast | A realistic shadow thrown onto the floor by a light. For product shots |
float | A soft oval pool beneath a hovering subject |
inset | A shadow inside the image, for a pressed-in or engraved look. Doubles as a glow |
Each type reads only the parameters that apply to it, and silently ignores the rest. A drop-shadow-x sent with drop-shadow-type=cast is ignored and left out of the X-Imgix-Params response header — that is correct, not a bug.
The canvas grows to hold the shadow. w and h size the picture, and the shadow is added around it, so the output is larger than the size you asked for. drop-shadow=10 adds 30 px per side.
Shadows need somewhere transparent to fall. JPEG and GIF output fill that area with white unless bg is set, and auto=format on a JPEG source stays JPEG. Use fm=png, fm=webp or fm=avif.
The whole mark-drop-shadow-* family applies the same shadows to a watermark instead of the base image. Mark shadows never grow the canvas; they are clipped at the image’s edge.
Drop shadows are not drawn on video.
Known Issues and Limits
- A drop shadow under a picture faded with
fadeshows black through the soft edge. This is tracked on ENG-2455. - Each tile of
mark-tile=gridgets its own shadow. - A
txtlayer cannot take a drop shadow on its own — usetxt-shad. - There is no separate shadow per
blendlayer. provenance=c2parecords a drop shadow as an edit.