Light Rays
AmbientDescription
Volumetric crepuscular light shafts with animated dust haze inside the beams, layered ray frequencies, and a blooming origin hotspot.
What is the light rays background?
Light Rays is a free light rays background that renders in real time with WebGL, so it stays sharp on any screen without shipping a heavy video file or GIF — and it pauses while off-screen to keep pages fast.
Use it as visual inspiration for a hero or section background on a landing page, portfolio, SaaS site or app. Every parameter — colors, speed and intensity — is adjustable in the remix playground. No account is needed to preview it.
Make it yours
Every knob below is tuned by the AI to match your design — or ask for changes in plain language, like “slower and more blue.”
colorsPaletteLight gradient: first color is the hot core near the origin, middle is the main beam tint, last is the far-edge atmospheric tint
bgPaletteDeep base atmosphere color behind the beams; keep it dark and slightly warm/cool-matched to the light colors
bg-alpha0–1Background plate opacity; 0 composites pure premultiplied light over the host section with no color leak
origin-x0–1Horizontal position of the light source (0 = left edge, 1 = right edge)
origin-y-0.5–1.5Vertical position of the light source; >1 places it just above the section so rays pour down
rays4–24Beam frequency: low = a few wide cathedral shafts, high = dense stage-light striations
length0.2–1.5Atmospheric throw distance of the beams before they fade into haze
softness0.1–1Beam edge diffusion: low = crisp defined shafts, high = soft diffuse glow
flicker0–1Per-beam intensity shimmer, like light through moving air; keep below 0.5 for an expensive feel
speed0.05–2Overall animation pace; slow drift (0.2-0.4) reads premium
Frequently asked questions
Yes. You can preview the light rays background for free in the AIDesigner effects library — no watermark and no sign-up required to try it.
Use "Remix this effect" to tune the colors, speed, and parameters, then use the preview as a reference for your website background implementation.
It renders on the GPU through WebGL at a capped frame rate, so it is far lighter than a background video and automatically stops drawing when it scrolls out of view — keeping load and battery impact low.
Yes. Every knob in the "Make it yours" section is adjustable, and you can also just ask the AI in plain language — for example "slower and more blue" — and it retunes the light rays background to match.
More effects
View allFluted Glass
Rounded glass flutes acting as true cylindrical lenses over a fluid two-tone light field: every rib compresses and mirrors the scene across its whole width while the rims light-pipe and disperse it — every visible line is displaced light, nothing painted on.
Riso Dither
Animated flow field quantized through a Bayer matrix into a limited ink palette — crisp retro risograph halftone dithering with chunky pixels, wind-swept ribbons, and a drifting luminous core.
Noise Shimmer
Premium film-texture finish: slow thin-film iridescent ribbons with fine animated grain and a subtle vignette.
