Design Atlas
한국어
✦ Visual effects

Light rays

라이트 레이

A background where beams of light fan out from a single point and rotate slowly — the volumetric "god rays" look of sunlight through haze.

Also known as: God raysVolumetric light background
···
html
<div class="rays"></div><div class="haze"></div><span class="src"></span>
css
.rays{position:absolute;inset:-30%;filter:blur(14px);mix-blend-mode:screen;animation:rot 46s linear infinite;
  background:conic-gradient(from 0deg at 50% 22%,
    transparent 0deg,rgba(255,224,160,.5) 5deg,transparent 12deg,
    transparent 32deg,rgba(255,224,160,.35) 37deg,transparent 46deg,
    transparent 72deg,rgba(255,224,160,.45) 78deg,transparent 88deg,
    transparent 142deg,rgba(255,224,160,.3) 148deg,transparent 158deg,
    transparent 202deg,rgba(255,224,160,.4) 208deg,transparent 218deg,
    transparent 262deg,rgba(255,224,160,.3) 268deg,transparent 278deg,
    transparent 322deg,rgba(255,224,160,.4) 328deg,transparent 338deg)}
.haze{position:absolute;inset:0;background:radial-gradient(55% 45% at 50% 22%,rgba(255,235,190,.35),transparent 70%)}
.src{position:absolute;left:50%;top:22%;width:8px;height:8px;margin:-4px;border-radius:50%;
  background:#fff;box-shadow:0 0 40px 18px rgba(255,240,205,.75)}
@keyframes rot{to{transform:rotate(360deg)}}

Alternating bright and dark wedges in a conic-gradient produce stripes radiating from a single point. A large blur softens each beam's edge, and mix-blend-mode: screen mixes it brightly with the dark background underneath — the result reads as real light.

Adding a bright white dot with a large box-shadow at the source, surrounded by a faint radial-gradient haze, finishes the illusion of light leaking naturally from its origin. Keep the rotation very slow (30s+) so the motion stays subliminal — you feel the mood, not the spin.

Aurora gradient is the soft drift of coloured blobs; light rays is a single source with a linear, radiating structure — that's the difference.

When to use

Use for a hero background or a premium/aspirational landing section. Rays only read clearly against a dark background, and text should sit away from the source point.