한 점에서 뻗어 나오는 빛줄기가 서서히 회전하는 배경 효과. 안개 속에 비치는 햇살(갓레이)을 흉내 냅니다.
디자인 아틀라스<div class="rays"></div><div class="haze"></div><span class="src"></span>.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)}}conic-gradient로 밝고 어두운 쐐기를 교대로 배치하면 한 점에서 방사형으로 뻗는 줄무늬가 만들어집니다. 여기에 큰 blur를 걸어 각 광선의 경계를 부드럽게 뭉개고, mix-blend-mode: screen으로 아래 어두운 배경과 밝게 섞으면 실제 빛처럼 보입니다.
광원 지점에는 흰 점 하나와 큰 box-shadow로 눈부신 광점을 얹고, 그 주위에 옅은 radial-gradient 안개(haze)를 깔아 광선이 광원에서 자연스럽게 새어 나오는 것처럼 마무리합니다. 회전은 아주 느리게(30초 이상) 둬야 빛이 움직인다는 걸 의식하지 못한 채 은은한 분위기만 느껴집니다.
오로라 그라데이션이 색이 있는 덩어리들의 뭉근한 움직임이라면, 라이트 레이는 하나의 광원에서 뻗는 직선적인 방사 구조라는 점이 다릅니다.
히어로 배경, 프리미엄·영적인 무드의 랜딩 섹션에 씁니다. 어두운 배경에서만 광선이 제대로 도드라지고, 텍스트는 광원 근처를 피해 배치하세요.