Home▸Colours & Light▸Umbra & Penumbra Shadow Casting (2D)

🔦 Umbra & Penumbra Shadow Casting (2D)

Drag a light source and an opaque block to cast real 2D shadows. Switch between a point light for sharp shadows and an extended light for soft penumbra edges, computed from true straight-line ray geometry.

Colours & Light2DEasy60 FPS📱 Mobile-adapted⇄ 3D version

⚙ Under the hood

Drag a point or extended light source and an opaque block to cast a real 2D shadow computed from straight-line ray geometry. Increase the light source size to soften the shadow edge and watch the umbra and penumbra regions blend, with live readouts for light distance, umbra length, and penumbra width.

opticsshadowslightgeometryumbrapenumbra

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install