atmosphere hero light-rays background cinematic cinematic hero sections launch pages with stronger atmosphere landing page backdrops behind key messaging hero backgrounds lack drama need volumetric light without video want ambient beams in pure CSS
Light Rays
Fetch snippet JSON:
curl https://webspire.de/snippets/atmosphere/light-rays.json Atmosphere
Light Rays
Angled beams add depth and direction without introducing visible objects.
Background
Customize
Quick Start
<section class="light-rays rounded-[2rem] p-16 text-white"></section>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 1324 bytes · 54 lines
- Custom Properties
-
--rays-top--rays-bottom--rays-width--rays-blur--rays-speed - Classes
-
.light-rays
atmosphere hero light-rays background cinematic
This snippet creates broad volumetric beams that make a hero feel lit from above. It works especially well behind centered copy or a product mockup.
Cinematic hero backdrop
<section class="light-rays rounded-[2rem] p-16 text-white">
<h1 class="text-5xl font-semibold">Launch with more atmosphere</h1>
</section>