The GPU edition. Blurred forms and mesh gradients rendered live in a WebGL2 shader — with warp, grain,
motion, cursor hover and dither, ASCII, halftone, pixel and glass effects. Export a PNG, a version-1
JSON config or a React snippet. Need plain CSS instead? Use the
original Haze Glow.
WebGL2 · live
shape –effect –motion –seed –render –
Shape
Mesh blends its points directly — center, size, roundness and rotation shape the blurred forms only. Softness sets how far each point's colour bleeds.
Mesh points
0 / 16
Drag the dots on the preview (or focus one and use the arrow keys). Each point is [x, y, colour].
Colour
core → edge · 2–10 stops
Palettehex · oklch() · var(--token)
behind the glow
Warp
Surface
Effect
Motion
Your system asks for reduced motion, so the preview holds one still frame and ignores hover. The config still records your motion settings.
Seed
A seed rebuilds the same form, palette and noise every time. Randomize keeps your motion, hover and effect.
React · Hazeglow component
Drop-in snippet that hands the version-1 config to a <Hazeglow> component.
PNG snapshot
The current frame — effect and grain included — rendered on the GPU at full size.
Config · v1 JSON
Paste a config in and press Load. Unknown fields are ignored; out-of-range values are clamped.
Share link
The page URL carries the config as #c=<base64 json>. Presets also open by name, e.g. #preset=ember.