HTML + CSSBackgrounds
Light rays
Soft beams of light fan out from above and turn slowly, like sun through a church window.
Settings
1x
1x
1
Code
<div class="pt-rays"><i></i><i></i></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Backgrounds
Where to use it
Light rays add a sense of occasion. They suit the reveal of a new product, an awards night, a choir’s website or the “thank you” page after someone buys a ticket. Two sets of beams turn slowly in opposite directions, so the light keeps shifting without drawing attention. A god rays background in CSS, no images needed.
Place the title just below the source of light, at the top center, where it gets a natural glow behind it. If the default feels too stripy on a big screen, raise the scale for fewer, wider beams.