A rounded glass box filled with slowly cycling light on black, with a second tone drifting through it, an edge glow and a soft HDR halo.
About this tool
Glow Box draws a rounded glass box lit from inside on a black stage, in raw WebGL2 with no library. Light flows through it in a slow 4.2 second cycle while a second tone drifts against the first, so the colours move between each other instead of sliding as one sheet. A pool of light gathers along the lower edge, the glass has an inner shadow, a bright lip and a slow sheen, and an HDR bloom spreads the glow onto the stage. Three palettes ship: Ultraviolet (the default), Glacier and Aurora, each a 512 step ramp blended in OKLab so every hand-off between colours eases in and out, and switching palettes cross-fades in under a second. Box size, glow, second tone, edge light, glass and speed are editable live, and the light can be paused. Rendering pauses off screen, in a hidden tab and under reduced motion, and a lost graphics context rebuilds itself. The export is one self-contained HTML file.
In collections: CSS Cards & Animated Card Components
Guide: CSS Cards: Build a Responsive, Accessible Card Component
UI/UX · HTML / CSS / JS · All tools