Light rays
Also called god rays, light beams, or sun rays background
Soft beams of light that fan down from above a section and slowly sway and pulse, like sun through a window, set behind a hero headline.
import type { ReactNode } from 'react';
import { motion, useReducedMotion } from 'motion/react';
// Resting angle (deg), width (% of the hero), and loop length (s) per beam.
const RAYS = [
{ angle: -38, width: 14, duration: 9 },
{ angle: -24, width: 9, duration: 7 },
{ angle: -10, width: 16, duration: 11 },
{ angle: 2, width: 8, duration: 8 },
{ angle: 14, width: 15, duration: 10 },
{ angle: 27, width: 10, duration: 6.5 },
{ angle: 40, width: 13, duration: 9.5 }
];
export function LightRaysHero({ children }: { children: ReactNode }) {
const reduceMotion = useReducedMotion();
return (
<section className='relative isolate grid min-h-[520px] place-items-center overflow-hidden bg-neutral-950 text-white'>
<div aria-hidden className='absolute inset-0 -z-10'>
<div className='absolute top-0 left-1/2 h-40 w-2/3 -translate-1/2 rounded-full bg-white/25 blur-3xl' />
{RAYS.map((ray) => (
// Blur on the wrapper, wedge clip on the child: on one element,
// the clip would cut off the blur's soft edges.
<motion.div
key={ray.angle}
className='absolute -top-[10%] h-[130%] origin-top opacity-50 blur-[10px]'
style={{
left: `${50 - ray.width / 2}%`,
width: `${ray.width}%`,
rotate: ray.angle
}}
animate={
reduceMotion
? undefined
: {
rotate: [ray.angle - 3, ray.angle + 3],
opacity: [0.35, 0.65]
}
}
transition={{
duration: ray.duration,
repeat: Infinity,
repeatType: 'mirror',
ease: 'easeInOut'
}}
>
<div className='size-full bg-linear-to-b from-white/70 via-white/20 to-transparent [clip-path:polygon(42%_0,58%_0,100%_100%,0_100%)]' />
</motion.div>
))}
</div>
{children}
</section>
);
}Add light rays behind the dark hero: seven beams fanning down from just above the top center, spread from -40deg to 40deg. Make each beam a tall element with a white-to-transparent gradient, clipped to a wedge with clip-path, inside a wrapper blurred 10px. Sway each beam ±3deg and pulse its opacity between 35% and 65% on its own 6 to 11-second loop, add a soft blurred glow at the source, mark the layer aria-hidden, and keep the rays still when prefers-reduced-motion is set.
Paste into Layerwise or any AI coding tool.
What is Light rays?
Light rays, also called god rays, are long, faint wedges of light that spread out from a point above the content. Each beam sways a few degrees and brightens and dims on its own slow loop, so the light seems to shift, like sun through leaves or a stage light through haze. They give a launch page or hero a calm sense of reveal.
Each ray is a tall element with a gradient that fades from the light color to transparent, clipped to a narrow wedge with clip-path and softened with filter: blur(). Put the blur on a wrapper and the clip on its child; on one element, the clip would cut off the blur’s soft edges. Rotating the rays around their top point with transform-origin: top and fading their opacity keeps the animation cheap. A WebGL shader can render true volumetric light, but plain elements are enough for most heroes.
Rays need a dark background to read as light, so use them in a dark hero or section. Keep them dim enough that the headline stays the brightest thing on screen, run slow loops of 6 to 12 seconds, and hold the rays still for people who prefer reduced motion.
Often confused with
- Aurora background
- An aurora is soft ribbons of color drifting across the background. Light rays are straight beams that spread out from one point above the content.
Related terms
All termsAurora background
A background of soft, blurred color ribbons that drift slowly, like the northern lights, used behind hero sections and landing pages.
Glow effect
A soft halo of colored light around a button, card, or text, made with colored shadows or a blurred layer behind the element.
Blur
A softening effect made with CSS filter: blur() on an element itself, or backdrop-filter: blur() on whatever shows through it from behind.
Hero section
The large first section at the top of a landing page, with a headline, a short subhead, a call to action, and a visual.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.