A CSS 3D Lighting Engine – Photon

Photon is a JavaScript library which can add simple lighting effects to any element in the 3D space.

In order to create the effect, it uses the WebKitCSSMatrix object (WebKit is the only supported browser engine).

The angle of the light can be defined and changed anytime with the provided functions.


It is possible to define the objects to be lighted one-by-one or group them at once and we can customize the effect by setting the max black + white usage.

P.S. The effects can be resource intensive if over-used.