Place the source
Move the origin across the canvas and choose a downward, diagonal, or open fan formation.
Light & depth
Light Ray Background
Place an off-screen source and shape layered shafts of light through a responsive atmosphere. Build anything from quiet window light to a vivid stage fan using only HTML and CSS.
Illuminate with restraint
Light that gives the page depth without taking it over.
Light Ray Background is made for launch heroes, editorial covers, event pages, and cinematic transitions. Each beam keeps a soft falloff so content can remain readable above the scene.
Shape the atmosphere
Control beam count, spread, angle, blur, intensity, haze, color, and a subtle breathing pace.
Keep rendering simple
The scene uses clipped CSS gradients and transforms—no image assets, canvas loop, or graphics runtime.
Three-step workflow
How to use the Light Rays studio
- Choose the quality of light
Begin with a composed preset, from cool underwater shafts to a narrow polar beam or energetic laser fan.
- Aim and soften
Position the source, direct its angle and spread, then balance beam diffusion against the surrounding haze.
- Export the atmosphere
Copy a self-contained snippet or download a standalone page with the same responsive composition.
Questions, answered.
Are the rays images?
No. Every ray is a clipped CSS gradient, so its colors, width, angle, and softness remain editable.
Will many rays slow down the page?
The generator caps the scene at eight slowly animated DOM layers and uses no JavaScript render loop.
What does reduced motion show?
The rays remain fully visible as a static layered lighting composition while their breathing animation stops.
Can the background sit behind text?
Yes. Place the exported element behind your content and use the intensity and haze controls to preserve contrast.