Drop Shadow

Add depth with realistic shadow effects

effect 2 credits

Drop Shadow

Add depth with realistic shadow effects

Overview

The Drop Shadow node adds a shadow behind an image to create depth and visual separation. It generates a blurred shadow at a specified offset, giving images a lifted, floating appearance commonly used in modern UI design.

Usage Tips

Use subtle shadows for professional, refined designs (offset: 2-5px, blur: 3-10px)
Increase offset and blur for dramatic, elevated effects
Lower opacity (0.2-0.4) creates natural, realistic shadows
Higher opacity (0.6-0.8) creates bold, graphic shadows
Combine with solid backgrounds to see shadow effects clearly
Works best on images with transparency or defined edges

Common Pairings

Solid Canvas - Create a background to make shadows visible
Text - Add shadows to text for better readability and depth
Merge - Layer shadowed elements over backgrounds
Composite - Build complex designs with multiple shadowed layers
Rectangle - Add shadows to UI elements like cards and panels

Gotchas

Shadows only appear around the opaque parts of the image
Very large blur radius can be computationally expensive
Shadow color is always black with adjustable opacity
The output canvas expands to include the shadow area
Multiple overlapping shadows can create performance issues

Technical Reference

Inputs

Name	Type	Required	Description
`input`	Image	Yes	Image to add shadow behind (transparency preserved)

Outputs

Name	Type	Description
`output`	Image	Image with drop shadow effect

Parameters

Name	Type	Default	Description
`params_offset_x`	number	5	Horizontal shadow offset in pixels (positive = right, negative = left)
`params_offset_y`	number	5	Vertical shadow offset in pixels (positive = down, negative = up)
`params_blur`	number	10	Shadow blur radius. Higher values create softer shadows.
`params_colour`	color	#000000	Shadow color
`params_opacity`	number	0.5	Shadow opacity (0.0 = invisible, 1.0 = fully opaque)